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

您可能会覆盖之前的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 2

您必须将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(""); 
        }
    }

});

Answer 3

已经设置的超时正在被替换..并且没有清除

Answer 4

在你问的第一个问题中：

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

javascript cleartimeout（）问题

4 个答案: