0

当用户在浏览器中输入时，我正在执行实时服务器端搜索。我的搜索功能跟不上打字速度，所以请求堆积如山。

我希望能够在服务器准备好响应之前取消被新查询替换的查询。

这就是我想要实现的目标：

  • 第一次击键应该发送到服务器。
  • 下一个击键应该由客户端脚本排队，直到服务器响应第一个查询。
  • 如果同时发生另一个击键，它应该替换当前排队的击键。

这样，一旦服务器准备好，只有最近的击键被发送到服务器。当然，如果没有队列，击键应该直接发送到服务器。

我当前的实现非常简单：

$.ajax({
  type: "get",
  dataType: "script",
  data: {
    search: "something"
  },
  url: "/api/search",
  success: function(data, status, xhr) {},
  error: function(xhr, textStatus, errorThrown) {}
});
4

3 回答 3

2

我认为您的方法会淹没服务器，因为您在每次击键时都会向服务器发送请求。即使您像@SravanS 所说的那样在客户端中止请求，服务器仍将接收并开始处理所有请求。一旦发送的 HTTP 请求已经在网络上，你不能停止它，你可以做的是没有客户端中止它，我假设通知服务器或只是忽略它发送的响应，但你仍然在泛滥它。

也许实现延迟以识别用户何时停止输入将是最好的方法。这是一个通用的延迟事件处理程序工厂，非常易于使用，只需将您的函数传递给它并为其分配延迟。如果两次击键之间经过 X 毫秒，则会发送一个请求，但如果在该延迟之前发生另一个击键，您甚至不会发出请求。

function delayedEvent(eventHandler, delay) {
    var lastTimeout = null;

    return function () {
        var that = this,
            args= Array.prototype.slice.call(arguments).sort();

        if (lastTimeout !== null)
            window.clearTimeout(lastTimeout);

        lastTimeout = window.setTimeout(function () {
            eventHandler.apply(that, args);
        }, delay);
    };
}

$('... selector ...').on('event', delayedEvent(function () { ... your code ... }, 500));

编辑：这是实现队列的方式，我没有测试过这段代码，将其用作起点。

function eventQueue(requestMaker) {
    // Here we store the last event queued, it'll wait until all the already running events are done.
    var lastQueued = null,
        runningQueue = [];

    // Push a new event into the running queue
    function pushRunning(toPush) {
        runningQueue.push(toPush.done(
            // It is necesary to use an IIFE to get the index by value and not by reference
            (function (index) {
                return function() {
                    // Remove this event from the runningqueue
                    runningQueue.splice(index, 1);
                    // If the queue has been completed, start running the last event sent
                    if (lastQueued !== null && runningQueue.length === 0) {
                        pushRunning(lastQueued());
                    }
                }
            }(runningQueue.lenght));
        ));
    }

    return function () {
        var that = this,
            args = Array.prototype.slice.call(arguments).sort();

        // Some events are already running, just override the lastQueued
        if (runningQueue.length > 0) {
            lastQueued = requestMaker.bind(that, args);
        } else {
        // Nothing queued run this event straight away, and queue it as running
            pushRunning(requestMaker.apply(that, args));
        }
    };
}

$('... selector ...').on('event', eventQueue(function () { 
    // It's extremely important that you return the jquery $.ajax Promise
    return $.ajax(...);
}, 500));
于 2016-05-09T13:21:17.057 回答
0 
var req = $.ajax();

//kill the request
req.abort()

您可以使用 $.ajax.abort 方法终止请求。在每次按键时，终止前一个请求（如果有的话）。

var prevReq = {};
elem.onkeyup = function(){
    if(prevReq.abort)
        prevReq.abort();    
    var prevReq = $.ajax(/*make the api call and clear prevReq object on response*/);    
};
于 2016-05-09T13:10:49.227 回答
0 
var arr = [], // bufor
    flag = true;
window.onkeydown = function (e) {
  arr.push(e);
  sync();
}

function sync() {
if(flag){
  flag = false;
  sendAjax(arr.shift());
  }
setTimeout(function () {
  sync();
}, 40)
}

但是在 sendAjax 中做这样的事情：

.onSuccess = function () {flag = true;}
.onError = function () {flag = true;}

它非常原始，但你可以开发它，在这个阶段它是弹性的而不是功能性的。

“但它有效，而且有效的东西 - 不是愚蠢的”:)

于 2016-05-09T13:19:54.717 回答