javascript cleartimeout()问题

Question

我的主要问题是: clearTimeout()是否停止计时器并且不执行计时器中的函数？或者只是清除超时并立即执行函数？

下面是我的例子

$('input').keyup(function(){
        var thisClass = $(this).attr('class').split(" ");
        var thisValue = $(this).val();
        var thisError = $(this).parent().siblings('.error');
        var thisTimeout;
        if(thisClass[1] == "letters"){
            if(thisValue.length <= 1){
                thisTimeout = setTimeout(function(){
                    thisError.html("You must have at least 2 characters");  
                    thisError.show();
                }, 800);
            } else {
                clearTimeout(thisTimeout);
                thisError.hide();
                thisError.html(""); 
            }
        }

    });

这是代码检查的一部分，检查输入框中是否至少有2个字符。目前，如果此代码包含2个或更少的字符，则它在800毫秒之后很好地执行超时。当输入框有2个以上的字符时，如果我的键入速度足够快，当我完成键入时，错误框仍然会出现。我可以通过多键入一个字符来清除错误，但是如果我快速键入我的名字，当我完成键入时，错误就会显示出来。

我还有这段代码：

$('input').keydown(function(){
        clearTimeout(thisTimeout);
        thisError.hide();
    });

希望如果我继续输入想法，它会清除错误吗？

Answer 1

在你的第一个问题中，你问了：

clearTimeout()是否停止计时器，并且不在计时器内执行函数？或者只是清除超时并立即执行函数？

答案是第一个选项- clearTimeout停止计时器并且不执行计时器回调。

代码问题中的问题是因为thisTimeout是在keyup函数中声明的。keydown函数没有对thisTimeout的引用。

您应该将其移动到共享作用域中：

var thisTimeout;

$('input').keyup(function(){
    var thisClass = $(this).attr('class').split(" ");
    var thisValue = $(this).val();
    var thisError = $(this).parent().siblings('.error');
    if(thisClass[1] == "letters"){
        if(thisValue.length <= 1){
            thisTimeout = setTimeout(function(){
                thisError.html("You must have at least 2 characters");  
                thisError.show();
            }, 800);
        } else {
            clearTimeout(thisTimeout);
            thisError.hide();
            thisError.html(""); 
        }
    }
});

$('input').keydown(function(){
        clearTimeout(thisTimeout);
        thisError.hide();
    });
});

Answer 2

您可能正在覆盖以前的setTimeout id。因此，您将无法清除它。

var thisTimeout;
$('input').keyup(function(){
    var thisClass = $(this).attr('class').split(" ");
    var thisValue = $(this).val();
    var thisError = $(this).parent().siblings('.error');

    if(thisClass[1] == "letters"){
        if(thisValue.length <= 1){
            clearTimeout(thisTimeout); // <-- already clear the timeout here before 
                                       // starting another one
            thisTimeout = setTimeout(function(){
                thisError.html("You must have at least 2 characters");  
                thisError.show();
            }, 800);
        } else {
            clearTimeout(thisTimeout);
            thisError.hide();
            thisError.html(""); 
        }
    }

});

Answer 3

您必须将thisTimeout移动到更高的作用域，以便保留它的值，并且在覆盖之前的值之前必须清除它：

var thisTimeout;
$('input').keyup(function(){
    var thisClass = $(this).attr('class').split(" ");
    var thisValue = $(this).val();
    var thisError = $(this).parent().siblings('.error');
    if(thisClass[1] == "letters"){
        if(thisValue.length <= 1){
            clearTimeout(thisTimeout);
            thisTimeout = setTimeout(function(){
                thisError.html("You must have at least 2 characters");  
                thisError.show();
            }, 800);
        } else {
            clearTimeout(thisTimeout);
            thisError.hide();
            thisError.html(""); 
        }
    }

});

仅供参考，这段代码也可以清理一下：

var thisTimeout;
$('input').keyup(function(){
    var self = $(this);
    var thisError = self.parent().siblings('.error');
    if (self.hasClass("letters")) {
        if(self.val().length <= 1){
            clearTimeout(thisTimeout);
            thisTimeout = setTimeout(function(){
                thisError.html("You must have at least 2 characters");  
                thisError.show();
            }, 800);
        } else {
            clearTimeout(thisTimeout);
            thisError.hide();
            thisError.html(""); 
        }
    }

});