javascript - 减少 ajax 搜索功能的消耗，在用户输入时延迟 3 秒

Question

我当前的功能是监听事件 - propertychange 更改 keyup 输入粘贴 并发出 ajax 请求。然而，ajax 在每封信上发送请求，我相信这不是一种有效的方法？或者是吗？

所以，我的目标是让用户键入输入，并且仅在 3 秒后执行 ajax。使用 setTimeout 并不能完成这项工作。

$(document).on('propertychange change keyup input paste', '#IDaccountSearchQueryInput', function (event) {
    var query = $('#IDaccountSearchQueryInput').val();
    setTimeout(function () {
        console.log(query);
    }, 5000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="text" id="IDaccountSearchQueryInput">

这段代码给了我:

h
他
哎呀
hell
你好
你好

因此，它在每次按键时执行，但我需要每 X 秒执行一次输入中的值，而不是每个字母。

Answer 1

您可以通过将 setTimeout id 存储在变量中，然后在开始输入时清除它来实现此目的。

var timer;
$(document).on('propertychange change keyup input paste', '#IDaccountSearchQueryInput', function() {
    if(timer) clearTimeout(timer);
    var query = this.value;
    if(!query.length) return false;
    timer = setTimeout(function() {
        $('#preview').text(query);
    }, 3000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="IDaccountSearchQueryInput" />
<div id="preview"></div>