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毫秒後執行超時。當輸入框有兩個以上的字符時，如果我輸入的速度夠快，當我輸入完成後，錯誤框仍然顯示。我可以通過輸入更多字符來清除錯誤，但如果我要快速輸入自己的名字，那麼輸入完畢後會顯示錯誤。

我也有這樣的一段代碼：

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

希望，如果我繼續打字 思考它會清除錯誤？

Answer 1

在你的第一個問題，你問：

不clearTimeout（）停止計時器並在 計時器不會執行該功能？或者它只是清除超時並立即執行 的功能？

答案是第一個選項 - clearTimeout停止定時器並且不執行定時器回調。

代碼問題中的問題是thisTimeout在keyup函數中聲明。​​函數沒有對thisTimeout的引用。

你應該把它移動到一個共享的範圍，而不是：在`else`部分

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標識。因此你將無法清除它。

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

已經設定的超時被替換..並沒有清除

Answer 4

你有那麼它的價值被保存到移動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(""); 
     } 
    } 

});