JavaScript clearTimeout返回undefined

Question

有人可以向我解释我的代码下面有什么问题吗？我正在声明一个公共变量并将其设置为setTimeout，如果不是null，则在再次设置之前清除超时。当我尝试清除超时时，我得到未定义，所以超时继续运行。

var usernameCheckTimeout = null; 

$(document).ready(function(){ 
    $("#username").on("keyup", function(e){ 
     if($(this).val().length >= 6) 
     { 
      if(usernameCheckTimeout != null) 
      { 
       clearTimeout(usernameCheckTimeout); 
      } 
      usernameCheckTimeout = setTimeout(isUsernameAvailable($(this).val()), 1000); 
     } 
    }); 
}); 

function isUsernameAvailable(username) 
{ 
    $.ajax({ 
     url : "/account/username-check", 
     method : "POST", 
     dataType : 'json', 
     data : { 
      'username' : username 
     } 
    }).done(function(data) { 
     console.log(data); 
    }); 
}; 

Answer 1

超时正在被清除。问题是你正在立即调用你的函数，而不是将函数传递给setTimeout。

setTimeout(isUsernameAvailable($(this).val()), 1000); 

isUsernameAvailable($(this).val())将被调用，这个调用的结果将被传递给setTimeout。

而应该通过调用该函数的函数：

编辑：由于@马克说，你还需要处理this不是你所期望的：

var value = $(this).val(); 

setTimeout(function(){ 
    isUsernameAvailable(value) 
}, 1000); 

Answer 2

你不需要做空检查也需要在this附近创建一个闭包，否则this将不是指你认为this实际上是。

var usernameCheckTimeout; 
$("#username").on("keyup", function (e) { 
    if ($(this).val().length >= 6) { 
     clearTimeout(usernameCheckTimeout); 
     var that = this; 
     usernameCheckTimeout = setTimeout(function() { 
      isUsernameAvailable($(that).val(); 
     }, 1000); 
    } 
}); 

一些jsfiddle爱像平常一样。

Answer 3

你有几个问题。第一个很重要的问题是，你是立即执行isUsernameAvailable($(this).val())，并将返回值传递给setTimeout - 你需要将它移动到一个匿名函数中，直到匿名函数被超时调用才会执行：

usernameCheckTimeout = setTimeout(function() { 
    isUsernameAvailable($(this).val()); 
}, 1000); 

JavaScript超时函数依赖于数字ID的功能。你应该避免测试null或undefined或其他任何东西，而是测试一个数字：

// leave it as undefined 
var usernameCheckTimeout; 

... 

if (typeof usernameCheckTimeout === 'number') { 
    clearTimeout(usernameCheckTimeout); 
}