DOM에서 제거한 후에도 계속 동적으로 추가 된 기능이

Question

이 스크립트는 동적으로 추가되었습니다. 그것은 타임 아웃 기능을 가지고 있으며 5 초마다 실행된다는 것을 의미합니다.

I가 사용 DIV이 함수를 불러

$(document).ready(function(){ 

(function($){ 

$.fn.baslatmesajlari = function() { 

setInterval(function(){ 

console.log("I am running"); 

}, 5000); 

     return this; 
    }; 
})(jQuery); 

}); 

$("body").baslatmesajlari(); 

dynamicjs.php;

$("#temporarycontent").load("dynamicjs.php"); 

내가

$("#temporarycontent").empty(); 

을 수행 할 때 스크립트는 아직 실행 중입니다. 어떻게 멈추게 할 수 있습니까?

Answer 1

당신은 당신이 그것을 실행의 중지 할 때, 다음, 간격 ID에 대한 참조가 다음 clearInterval(the_id)

let interval = null //this is the variable which will hold the setInterval id 
$(document).ready(function() { 
    (function ($) { 
    $.fn.baslatmesajlari = function() { 
     interval = setInterval(function() { 
     console.log('I am running') 
     }, 5000) 
     return this 
    } 
    })(jQuery) 
}) 
$("body").baslatmesajlari() 

그리고 호출해야합니다 :

$("#temporarycontent").empty(); 
clearInterval(interval) // it should stop the function. 

을

희망이 있습니다.

Answer 2

setInterval 함수에 의해 반환 된 intervalId에 대한 핸들이 필요하거나 플러그인 자체에 파괴 및 정리를 위해 API를 제공 할 수는 없습니다. 가장 쉬운 방법은 플러그인의 상태를 적용한 DOM 요소에 첨부하는 것입니다.

(function ($) { 
 
    
 
    const PLUGIN_NAME = 'baslatmesajlari'; 
 
    
 
    function Plugin($el) { 
 
     this.$el = $el; 
 
     this._timerId = setInterval(function() { 
 
     console.log('running'); 
 
     }, 2000); 
 
    } 
 
    
 
    Plugin.prototype.destroy = function() { 
 
     this.$el.removeData(PLUGIN_NAME); 
 
     clearInterval(this._timerId); 
 
    }; 
 
    
 
    $.fn[PLUGIN_NAME] = function() { 
 

 
     if (!this.data(PLUGIN_NAME)) this.data(PLUGIN_NAME, new Plugin(this)); 
 
     
 
     return this; 
 
    }; 
 

 
})(jQuery); 
 

 
$(function() { 
 
    var plugin = $('#plugin').baslatmesajlari().data('baslatmesajlari'); 
 
    
 
    $('#destroy').click(function() { 
 
    plugin.destroy(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="plugin"></div> 
 

 
<button id="destroy">Destroy plugin</button>