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

你不能，你需要一个intervalId函数返回的setInterval的句柄，或者在插件上提供一个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>

Answer 2

您必须引用间隔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.

希望它有所帮助。

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

2 个答案: