Question

我有jsFiddle个例子可供使用。

$().ready(function() {
    $('.test').each(function() {
        $this = $(this);
        $this.data('Worker', function() {
            $('#stop').html((parseInt($('#stop').html()) + 1))
        })
        setInterval($this.data('Worker'), 100);
    });

    $('#stop').click(function() {
        // I want the worker function to stop being triggered here
        $('.test').remove();
    });
});

我想要做的是将一个worker函数附加到DOM中的元素，这样当删除元素时，worker函数就会停止。

这样的事情可能吗？

Answer 1

晚会，但我解决了这个问题：

var id = setInterval(function()
{
    if(some_condition)
    {
        clearInterval(id);
    }
}, 1000);

绝对是最简单的方法：没有不必要的存储，没有技巧。

Answer 2

你走了：

var stopBtn = $( '#stop' );

$( '.test' ).each(function ( i, elem ) {
    var tid = setInterval(function () {
        if ( elem.parentNode ) {
            stopBtn.html(function ( i, num ) { return parseInt(num,10) + 1; });
        } else {
            clearInterval( tid );
        }
    }, 1000);
});

stopBtn.click(function () {
    $( '.test' ).remove();
});

说明：

首先我们需要一个闭包 - 区间函数需要知道哪个test-DIV是它的“所有者”，因此，我们需要将对DIV的引用传递给区间函数。在我的代码中，该引用存储在elem变量中，由于闭包，该变量在interval函数内可用。因此，interval函数检查其“owner”DIV是否仍然附加到DOM（通过检查其父节点）。如果是，则停止按钮递增。如果不是，则清除间隔。但是，为了能够清除间隔，我们需要其计时器ID。我们有这个ID，因为我们将它存储在“tid”变量中（setInterval调用返回计时器ID）。

现场演示： http://jsfiddle.net/simevidas/ZjY7k/15/

Answer 3

另一种可以删除间隔的方法是在间隔内使用clearInterval。

window.setInterval(function(){
    // Do all your stuff here
    if(/*something something*/){
        window.clearInterval(this);
        alert("The interval didn't clear");
    }
}, /*However long*/);

如果间隔未清除，则会显示警告说“间隔未清除”。否则，间隔成功清除。

Answer 4

这是一个鲜为人知的事实，但setInterval会返回一个可以与clearInterval一起使用的值来取消间隔。

var result = setInterval(function, delay);
// at some point later...
clearInterval(result);

Answer 5

我怀疑实现“自终止”间隔的正确方法是通过一系列超时来实现间隔。

半伪代码：

setTimeout(function repeat() {
  if (continue_to_run) // this code here may cause timing to be inaccurate
    setTimeout(repeat, interval_duration);
  do_task_on_interval();
}, 0)

这个重复计时器自行清理。

Answer 6

使用clearInterval：

$().ready(function () {
    $('.test').each(function () {
        $this = $(this);
        $this.data('Worker', function () { $('#stop').html((parseInt($('#stop').html()) + 1)) })
        $this.data('intervalId', setInterval($this.data('Worker'), 100));
    });

    $('#stop').click(function () {
        $('.test').each(function() { clearInterval($(this).data('intervalId')); }).remove();
    });
});

Answer 7

Javascrip使用不同的评估顺序进行分配。也就是说，它们是从左到右求值的，这意味着您可以在其表达式内使用该变量。

const stop = setInterval(() => {
  // Execute the function body.
  console.log('Executed')
  // When you want to stop it, you
  // can clear the interval with the
  // stop handler.
  clearInterval(stop)
}, 1000)

在该特定示例中，间隔仅执行一次，并在定义间隔1秒后清除。

setInterval函数可以自行停止吗？

7 个答案: