Question

我正在使用Google Maps API制作一款小应用。您可以在文本框中键入pin，并触发AJAX调用以从我的数据库中获取坐标。我正在调用keyup事件上的操作，并且在文本框中有2个字符。问题是我希望用户能够在开始拍摄AJAX之前输入整个内容。我已将Asynch设置为false，否则异步调用不允许我从地图中删除标记并在它们全部消失之前引入更多标记。

    $('input[name="location"]').keyup(function(){
        if($(this).val().length > 1){
            $(this).css('background', '#fff url("/images/indicator.gif") no-repeat center right');
            deleteOverlays();
            $.ajax({
                dataType: "json",
                url: "locAjax.php",
                data: ({term : this.value}),
                async: false,
                type: "GET",
                success: function(data) {
                    setMarkers(map, data);
                }
            });
            $(this).css('background', '#fff');
        }
    });

我可以在通话前使用某种时间或某些东西给用户足够的时间来编写整个内容。或至少一半。

请告诉我。

非常感谢。

Answer 1

var timer;

$('input[name="location"]').keyup(function(){
    clearTimeout(timer);
    timer = setTimeout(function(){
    if($(this).val().length > 1){
        $(this).css('background', '#fff url("/images/indicator.gif") no-repeat center right');
        deleteOverlays();
        $.ajax({
            dataType: "json",
            url: "locAjax.php",
            data: ({term : this.value}),
            async: false,
            type: "GET",
            success: function(data) {
                setMarkers(map, data);
            }
        });
        $(this).css('background', '#fff');
    }
    }, 5000 ); // <--- do ajax call after 5 seconds of the last keyup character...
});

Answer 2

很简单，你需要使用setTimeout和clearTimeout。例如，

var timerId = null;
$('input[name="location"]').keyup(function(){
   if (timerId) {
      clearTimeout(timerId);
   }
   timerId = setTimeout(makeServiceCall, 20); // wait for 20 millisecond.
});

这里makeServiceCall将是一个函数，它将包含您为进行服务调用而概述的代码。此函数还应将timerId重置为null。因此，无论何时按下键，我们都会将定时器设置为触发服务呼叫，如果在超时之前按下键，则我们将重置上一个定时器并设置一个新的定时器。

如何在jQuery中创建keyup事件ajax请求之前保持几毫秒

2 个答案: