Question

我有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，我想取消它。

Answer 1

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

Answer 2

如果我正确理解您的问题，我认为您只需设置fadeOutDelay var global。

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

Answer 3

试试这个

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

Answer 4

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

Answer 5

这是一种没有全局变量的方法。

并且，我认为你想使用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
}

同一函数中的setInterval和clearInterval

5 个答案: