JavaScript clearTimeout 返回未定义

Question

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

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

你不需要做空检查，你也需要在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 2

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

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

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

你应该传递一个调用这个函数的函数：

编辑：正如@Mark 所说，您还需要处理this 不是您所期望的：

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

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

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