當用戶停止輸入時的Ajax搜索

Question

我想要在用戶停止輸入時執行ajax，但是這不適用於按鍵事件，並且當我在id搜索文本中輸入onkeyup = doneTyping（）時，瀏覽器崩潰

<script>  
var typingTimer;    //timer identifier 
var doneTypingInterval = 5000; //time in ms, 5 second for example 
var $input = $('#search_text'); 
var txt = $(this).val(); 
$input.on('keyup', function() { 
    clearTimeout(typingTimer); 
    typingTimer = setTimeout(doneTyping, doneTypingInterval); 
}); 

$input.on('keydown', function() { 
    clearTimeout(typingTimer); 
}); 

function doneTyping() { 
    $.ajax({ 
        url:"fetch.php", 
        method:"post", 
        data:{search:txt}, 
        dataType:"text", 

        success:function(data) 
        { 
          $('#searchresults').html(data); 
        } 
       }); 

    //do something 
} 
</script> 

謝謝

Answer 1

我把你的代碼放到一個片段，並增加了一些控制檯日誌記錄顯示是怎麼回事。

這表明這些事件的運行方式與您描述的完全相同......並且在我退出鍵入5秒後，在控制檯中顯示「完成鍵入」。

var typingTimer; //timer identifier 
 

 
var doneTypingInterval = 5000; //time in ms, 5 second for example 
 
var $input = $('#search_text'); 
 

 
console.log("$input = ", $input.length); 
 

 
$input.on('keyup', function() { 
 
    console.log("Key up"); 
 
    clearTimeout(typingTimer); 
 
    typingTimer = setTimeout(doneTyping, doneTypingInterval); 
 
}); 
 

 
$input.on('keydown', function() { 
 
    console.log("Key down"); 
 
    clearTimeout(typingTimer); 
 
}); 
 

 
function doneTyping() { 
 
    console.log("Done typing"); 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
 
Test input: <input id="search_text">