jquery - 如何在javascript中延迟对服务器的ajax调用？

Question

对于以下代码：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
    var delay = (function() {
        var timer = 0;
        return function(callback, ms) {
            clearTimeout(timer);
            timer = setTimeout(callback, ms);
        };
    })();

    $("div#main").on("keyup", "input[name=code]", function() {
        delay($.getJSON("/some-url/", function(data) {
            console.log("here");
        }), 2000);
    });

});
</script>

<div id="main">
  <input name="code" />
</div>

有谁知道我为什么会收到 javascript 错误

Uncaught SyntaxError: Unexpected identifier

我正在尝试延迟将 keyup 数据发送到服务器。

Answer 1

您刚刚忘记传递delay函数定义。只需稍微调整您的事件处理程序（其他一切都保持不变）：

$("div#main").on("keyup", "input[name=code]", function() {
    delay(function() { // <-----
        $.getJSON("/some_url/", function(data) {
            console.log("here");
        });
    }, 2000);
});

示例：http: //jsfiddle.net/f7F7c/

Answer 2

对我来说看起来像自动完成？试试这个...

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
    var timer = 0;

    function runAjax() {
        $.getJSON("/some-url/", function(data) {
            console.log("here");
        });
    }

    $("div#main").on("keyup", "input[name=code]", function() {
        clearTimeout(timer);
        timer = setTimeout(runAjax, 2000);
    });

});
</script>

<div id="main">
  <input name="code" />
</div>

Answer 3

这对你有帮助吗：http: //jsfiddle.net/ZYXp4/8/

这只是在每次触发 keyup 操作时在键入时增加了延迟。试试 jsfiddle 看看它的实际效果。您可以在延迟发生后进行 ajax 调用，没有问题^^

<input id="in" type="text"/>
<div id="out"></div>

var typingTimer;
var doneTypingInterval = 1000;

//on keyup, start the countdown
$('#in').keyup(function(){
    clearTimeout(typingTimer);
    if ($('#in').val) {
        typingTimer = setTimeout(function(){
            //do stuff here e.g ajax call etc....
             var v = $("#in").val();
             $("#out").html(v);
        }, doneTypingInterval);
    }
});