当用户停止输入时的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">