setInterval和clearInterval在同一个函数中

setInterval and clearInterval within same function

本文关键字：函数 同一个 clearInterval setInterval      更新时间：2023-09-26

我有这个message();函数:

function message(kind, text){   
    if(fadeOutDelay != undefined){
       clearInterval(fadeOutDelay);
    }
    $("#message").show();
    $("#message").attr('class',kind);
    $('#message').text(text);
    var fadeOutDelay = setInterval(function(){
        $("#message").fadeOut(2000);
    },10000);
}

问题是，我试图清除间隔时，该功能是重新运行，以防止褪色的最新消息。我想继续使消息发生的能力，如果他们是10秒内彼此褪色不发生。基本上，如果在运行此函数时发生setInterval，我想取消它。

fadeOutDelay不在其他函数调用的作用域中。您可以使用全局变量:

var fadeOutDelay;
function message(kind, text){   
    if(fadeOutDelay != undefined){
       clearInterval(fadeOutDelay);
    }
    $("#message").show();
    $("#message").attr('class',kind);
    $('#message').text(text);
    fadeOutDelay = setInterval(function(){
        $("#message").fadeOut(2000);
    },10000);
}

如果我正确理解了你的问题，我认为你只需要设置你的fadeOutDelay var全局

var fadeOutDelay; //global var.
function message(kind, text){   
    if(fadeOutDelay != undefined){
       clearInterval(fadeOutDelay);
    }
    $("#message").show();
    $("#message").attr('class',kind);
    $('#message').text(text);
    fadeOutDelay = setInterval(function(){
        $("#message").fadeOut(2000);
    },10000);
}

试试这个

var fadeOutDelay = null;
function message(kind, text){   
    if(fadeOutDelay){
       clearInterval(fadeOutDelay);
       fadeOutDelay = null;
    }
    $("#message").show();
    $("#message").attr('class',kind);
    $('#message').text(text);
    fadeOutDelay = setInterval(function(){
        $("#message").fadeOut(2000);
    },10000);
}

fadeOutDelay变量需要在这个函数的作用域之外声明:

var fadeOutDelay = null;
function message(kind, text){   
    if(fadeOutDelay) {
       clearInterval(fadeOutDelay);
    }
    $("#message").show();
    $("#message").attr('class',kind);
    $('#message').text(text);
    fadeOutDelay = setInterval(
        function() { $("#message").fadeOut(2000); },
        10000
    );
}

这里有一种不使用全局变量的方法。

并且，我认为您希望使用setTimeout而不是setInterval，因为您只希望计时器为每个显示的消息触发一次。

我还对消息对象的初始操作进行了重新排序，以便在显示之前设置数据和类，并将jQuery对象保存在一个局部变量中，而不是一遍又一遍地运行选择器。

function message(kind, text){   
    var m = $('#message');
    m.text(text);
    m.attr('class', kind);
    m.show();
    var timer = m.data("timer");         // get previous timer value
    if (timer) {
        clearTimeout(timer);             // clear timer, if still running
    }
    timer = setTimeout(function() {
        m.fadeOut(2000);
        m.data("timer", null);      // clear stored timer
    },10000);
    m.data("timer", timer);         // store timer as data on the object
}
相关文章：