Question

我的问题有点抽象。

我们都熟悉在发出AJAX请求时出现的AJAX预加载器/微调器。我的问题是你如何避免这些？

以可排序列表为例。当用户拖放项目以使用它们时，会进行AJAX调用以更新订单。

之前，我会弹出一个全屏AJAX微调器，以防止用户在AJAX调用完成之前做任何事情。

我的问题是，如何避免使用AJAX微调器并“简化”ajax请求，以确保用户在2秒内启动20个ajax请求，它们将按顺序执行？

我真的不需要代码示例，只是接受或流行的技巧/想法。或者，如果我在这里完全偏离轨道。

谢谢

Answer 1

<强>更新

使用async javascript library代替此来实现您的目标

旧

到目前为止，在使用数组或队列方面确保它们一次加载并返回一个好的答案。我会像gmail一样消除旋转器，只在必要时才向用户发送消息。关于所有这些微调器交易，没有必要打扰用户。无论如何，他们看起来就像小机器人一样。这是我要做的一些代码。

由于我对此表示认可，我将解释其功能。

发生错误时停止队列
成功发生时继续排队
具有上下文成功/错误的事件处理程序

我写插件所以这是一个值得插件的想法吗？我不这么认为，但嘿，你永远不知道。

var queue = [],
doRequest = function(params) {
    params.running = true;
    $.ajax({
        url: params.url,
        dataType: 'json',
        success: function(d) {
            params.success.call(params,d);
            queue.unshift(); // Quit counting your change and move along.
            if (queue.length > 0) {
                doRequest(queue[0]); // Hey buddy, your next.
            }
        },
        error: function(a,b,c) {
            params.error.call(params,a,b,c);
            alert('"oops"'); // Rick Perry
        }
    });
},
queueRequest = function(params) {
    queue.push(params); // Sir, you'll need to go to the BACK of the line.
    if (!queue[0].running) {
        doRequest(queue[0]);
    }
};

// so to use this little snippit, you just call "queueRequest" like so (over and over)
queueRequest({
    url: 'someajax.abc',
    success: function(d) {
        // let the user know their stuff was saved etc.
        // "this" will be the context of the "params"
    },
    error: function(a,b,c) {
        // let the user know something went wrong etc.
        // "this" will be the context of the "params"
    } 
});

你已经完成了。

Answer 2

您可以创建一个“ajax请求管理器”，将ajax请求排队等待（并可能捆绑在一起）。我有一个复杂的应用程序，有许多ajax可更新控件，我只在正在更新的控件上显示微调器。由于您的可拖动列表只更新了服务器上的内容，因此您可以在没有微调器的情况下离开。

Answer 3

其中一个选项可能是在客户端上创建某种请求队列。用户对两个项目进行排序后，会将一个项目添加到队列中并开始执行。如果在第一次调用完成之前发生了另一种排序，它将被放入队列中并在第一次完成后执行。

<强>更新
在执行同步请求时，您应该确定处理案例。在这个阶段，所有ajax请求应以某种方式存储在隐藏字段（只是一个想法），并在同步请求本身之前由服务器进行处理。

Answer 4

我建议你使用jquery队列，它可以帮助你排队任何东西，如果它是ajax请求或动画队列......

Answer 5

这个答案有点抽象，但请看一下jQuery Deferred对象：http://api.jquery.com/category/deferred-object/

它可能对您的情况有所帮助，因为它基本上会向AJAX调用添加一些状态信息，您可以随意读取/更新。

Answer 6

有一个中央请求问。
一个隐藏的旋转器位于一切之上。

中央请求Q 有一个中心数组，临时保存所有请求，因此pesudo代码将是这样的......

var centralQ = []; //holds the entire process Q

var inProc = false; //provides an in Q proc lock
//processes the request one at a time

function reqProc() {
    if( centralQ.length == 0 ) {
        inProc = false;
        return true;
    }

    inProc = false; //locks it 
    var req = centralQ[0];

    function callBack() {
        //error / res processing??
        if( req.callback ) {
            req.callback.apply( req, arguments ); //calls the request callback
        }

        window.setTimeout( reqProc, 0 ); //loop backs, uses timeOut to defer the the loop
    }

    //Your loader???
    jQuery.get( req.url, req.data, callBack );
}

function addReq( addRequest ) {
    centralQ.push( addRequest );
    if( !inProc ) { //does not process if it is already running
        reqProc();
    }
}

你可能需要做一些错误捕获/重试，但是你得到了粗略的想法。

Global Spinner 只需在需要时开始在顶部微调器中填充，并在不需要时淡出它。

Answer 7

这不正是为什么，jquery中有async选项？

使用async: true排队请求。

保持旋转器以避免再次发送相同的请求一遍又一遍。就像拿一个案例一样，可以选择启用和禁用某个功能...如果用户再次点击同一个按钮，则会一遍又一遍地发送相同的请求。在这些情况下仅使用微调器。

弹出一个大盒子，以避免访问整个页面......只是一个愚蠢的想法（没有冒犯）。

使用微调器来处理或以某种方式处理的特定元素。对于请求，只需使用async ...

CASE CLOSED;）

AJAX精简技术？

7 个答案: