DOMから削除した後も動的に追加された機能がまだ実行中

Question

このスクリプトは動的に追加されました。タイムアウト機能があり、5秒ごとに実行されることを意味します。

dynamicjs.php

$(document).ready(function(){ 

(function($){ 

$.fn.baslatmesajlari = function() { 

setInterval(function(){ 

console.log("I am running"); 

}, 5000); 

     return this; 
    }; 
})(jQuery); 

}); 

$("body").baslatmesajlari(); 

私が使用してdiv要素には、この機能をロードします。

$("#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>