我有一个
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函数停止.
有可能吗？
解决方法
干得好：
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是它的“所有者”,ergo,我们需要将DIV的引用传递给interval函数.在我的代码中,该引用存储在elem变量中,由于关闭,它在interval函数内部可用.因此,间隔函数检查其“所有者”DIV是否仍然附加到DOM(通过检查其父节点).如果是,停止按钮增加.如果不是,则间隔被清除.但是,为了能够清除间隔,我们需要其定时器ID.我们有这个ID,因为我们将它存储在“tid”变量中(setInterval调用返回定时器ID).
