JavaScript clearTimeout는 정의되지 않은 코드를 반환합니다.

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에 전달됩니다.

대신이 함수를 호출하는 함수를 통과해야합니다

편집 :

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

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

Answer 2

당신은 필요가 없습니다 @ 마크, 당신은 또한 this 당신이 기대되지 않는 다룰 필요가 말했듯 null 체크를하려면 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 timeout 함수는 숫자 ID를 사용하여 작동합니다. 당신은 null 또는 undefined 또는 다른 용도로 테스트를 피하고, 대신에 번호를 테스트해야합니다 : 나는`this` 문제를 놓쳤다

// leave it as undefined 
var usernameCheckTimeout; 

... 

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