使ajax搜索功能更少消耗,在用户打字时将其延迟3秒钟

Question

我当前的功能是关注事件 - propertychange change keyup input paste并发出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
他
HEL
地狱
你好
你好

因此,它在每个按键上执行,但我需要每隔X秒执行输入值,而不是每个字母.

Answer 1

您可以通过将setTimeoutid 存储在变量中,然后在开始键入时清除它来完成此操作.

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>