0 
var TimeOut; //Global
$('[name^="HMapDot"]').each(function(i){
    TimeOut = setTimeout(function(){
        $('[name^="HMapDot"]').css({'visibility':'hidden'});
        $('#HMapTime').html($('[name="HMapDot'+i+'"]').attr('role')+' [ '+(i+1)+' ]');
        $('[name="HMapDot'+i+'"]').css({'visibility':'visible'});
    },i * iTime);
    if(i == (iMany-1) || $('[name^="HMapDot"]').length == 0){ clearTimeout(TimeOut); return false; }
});

我的这段代码工作得很好，使用 JQuery 2.x 和 AJAX 来提取数据。我的意图是延迟“地图”上的点每秒出现/消失（滑块值）。现在，当我单击“停止”时，页面、值、元素将为 $.remove，但计时器将继续倒计时。如何停止计时器和 $.each？

下面的修改代码有效：

var TimeOuts = []; //Global
var T;
function ClearTimeOuts(){
    for(var i in TimeOuts){
        clearTimeout(TimeOuts[i]);
    }
}
$('[name^="HMapDot"]').each(function(i){
    T = setTimeout(function(){
        $('[name^="HMapDot"]').css({'visibility':'hidden'});
        $('#HMapTime').html($('[name="HMapDot'+i+'"]').attr('role')+' [ '+(i+1)+' ]');
        $('[name="HMapDot'+i+'"]').css({'visibility':'visible'});
        if(i == (iMany-1) || $('[name^="HMapDot"]').length == 0){ 
            ClearTimeOuts(); 
            return false;
        }
    },i * iTime);
    TimeOuts.push(T);
});
4

2 回答 2

2

您正在调用setTimeout内部each- 您需要一个数组来存储和停止超时句柄：

var TimeOuts = []; //Global
function ClearTimeOuts(){
    for(var i in TimeOuts){
        clearTimeout(TimeOuts[i]);
    }
}
$('[name^="HMapDot"]').each(function(i){
    var T = setTimeout(function(){
        $('[name^="HMapDot"]').css({'visibility':'hidden'});
        $('#HMapTime').html($('[name="HMapDot'+i+'"]').attr('role')+' [ '+(i+1)+' ]');
        $('[name="HMapDot'+i+'"]').css({'visibility':'visible'});
    },i * iTime);
    if(i == (iMany-1) || $('[name^="HMapDot"]').length == 0){ 
        ClearTimeOuts(); 
        return false;
    }
    TimeOuts.push(T);
});
于 2013-09-29T10:34:01.557 回答
0

您所有的点都共享相同的变量来跟踪计时器，因此每个点都会覆盖前一个。每个点都需要一个变量。

在函数内部声明变量，这将为每个点创建一个局部变量：

$('[name^="HMapDot"]').each(function(i){
    var TimeOut;
    TimeOut = setTimeout(function(){
        $('[name^="HMapDot"]').css({'visibility':'hidden'});
        $('#HMapTime').html($('[name="HMapDot'+i+'"]').attr('role')+' [ '+(i+1)+' ]');
        $('[name="HMapDot'+i+'"]').css({'visibility':'visible'});
    },i * iTime);
    if(i == (iMany-1) || $('[name^="HMapDot"]').length == 0){ clearTimeout(TimeOut); return false; }
});
于 2013-09-29T10:32:26.067 回答