javascript - 即使从 DOM 中删除后，动态添加的功能仍在运行

Question

这个脚本是动态添加的。它有一个超时功能，意味着它每 5 秒运行一次。

动态js.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

你不能，你需要一个由 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>