3

我有一个输入框，每次按键都有一个 ajax 请求。所以如果我输入单词“name”，将会有 4 个成功的请求。所以我实际上只想要执行的最新请求。因此，如果我输入单词“名称”，则只有一个请求将是最后一个请求。

我也有一个解决方案（这是一个简单的点击方法示例）

JS脚本

var callid = 1;

function ajaxCall (checkval ){
    if(checkval == callid){
        $.ajax({
            type: 'post',
            url: baseurl + "test/call_ajax",
            data: {
                val: "1"
            },
            success: function(data) {
                console.log(data)
            }
        });
    }
}

function call(){
    var send = callid+=1;
    setTimeout( function(){ ajaxCall(send)  } , 500);
}

html脚本

<a href="#" onclick="call()" > Call ajax </a>

这是完美的工作。但我想如果有办法改进它一点点。

有任何想法吗 ：）

4

3 回答 3

4

我相信您正在寻找一些更好的事件分派意图技术。

var eventDispatcher = null;
$('.textbox').keyup(function(){
   if(eventDispatcher) clearTimeout(eventDispatcher);
   eventDispatcher = setTimeout(function(){
       $.ajax({ ... });
   }, 300);
});
于 2013-05-01T17:45:35.437 回答
3

你可以在 setTimeout 中做你的 ajax。所以你不需要声明和检查一个额外的变量或编写另一个函数，比如 call()

$(document).ready(function () {
    var timer;
    $('#fillMe').keypress(function () {
        clearTimeout(timer);
        timer = setTimeout(function () {
            //replace this with your ajax call
            var content = $('#fillMe').val();
            $('#result').text('You will only see this if the user stopped typing: ' + content);
        }, 1000); // waits 1s before getting executed
    });
});

<input type="text" id="fillMe">
<div id="result"></div>

在每个按键事件上，这都会清除超时并立即创建一个新的超时。这意味着 setTimeout 函数的内容只有在用户停止输入至少 1 秒后才会执行。当然 1 秒只是示例目的的值。您可以将其更改为您想要或认为合适的时间（例如 500 毫秒）

见我的jsfiddle

于 2013-05-01T17:49:12.433 回答
1

setTimeout 返回一个 id，您可以存储并使用它来清除先前设置的计时器：

var timerId;

function call() {
    if (timerId !== undefined) {
        clearTimeout(timerId);  
    } 

    timerId = setTimeout( function() { ajaxCall(send) }, 500);
}

这样的结果应该是在最后一个字母输入后500ms会调用ajaxCall方法。

于 2013-05-01T17:44:02.833 回答