javascript - setinterval 和 clearinterval 无法正常工作

Question

我正在为三星智能电视创建应用程序。在那之后，我希望音量条出现 5 秒钟，然后它必须隐藏。如果用户连续按下音量，它必须在用户停止按下按钮 5 秒后隐藏。我试过这样：

var vt;
    if($("#volume").css('display')=='none'){
        $("#volume").show(); 
        vt=setInterval(function(){$("#volume").hide();},5000);

    }
    else{
        clearInterval(vt);
        vt=setInterval(function(){$("#volume").hide();},5000);
    }

当用户按下按钮时，它不会清除间隔，而是为每次点击创建实例

Answer 1

试试这个：

if($("#volume").css('display')=='none'){
    $("#volume").show(); 
    vt = setTimeout(function(){$("#volume").hide();},5000);
}
else{
    clearTimeout(vt);
    vt = setTimeout(function(){$("#volume").hide();},5000);
}

Answer 2

这是从下划线库中挑选的有点复杂的解决方案。

var debounce = function(func, wait, immediate) {
    var timeout, result;
    return function() {
        var context = this, args = arguments;
        var later = function() {
            timeout = null;
            if (!immediate) {
                result = func.apply(context, args);
            }
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) {
            result = func.apply(context, args);
        }
        return result;
    };
};


var clickHandler = function(){
    $("#volume").hide();
}

var debouncedClickHandler = debounce(clickHandler, 5000);

$('body').on('click', debouncedClickHandler) //change this line to your click handler

现在你不需要做任何事情，clickHandler 只会在最后一次调用 debouncedClickHandler 延迟 5 秒后被调用