Question

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);
});

Answer 1

您正在调用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);
});

Answer 2

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

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

$('[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; }
});

$ .each＆amp; setTimeOut问题 - TimeOut未清除

2 个答案: