AJAX精简技术？ [英] AJAX Streamlining techniques?

问题描述

我的问题是有些抽象。

我们都熟悉AJAX preloaders /纺纱所出现正在做一个AJAX请求时。我的问题是你如何避免这些？

We're all familiar with AJAX preloaders/spinners that come up when an AJAX request is being made. My question is how do you avoid these?

举个例子，一个排序列表。当用户拖放项目求助于他们，一个AJAX调用，以更新的顺序。

Take for example, a sortable list. When a user drags and drops items to resort them, an AJAX call is made to update the order.

在，我会全屏AJAX微调弹出prevent用户做任何事情，直到AJAX调用是完全的。

Before, I would pop up a fullscreen AJAX spinner to prevent the user from doing anything until the AJAX call was complete.

我的问题是，我将如何去避免AJAX微调和精简的Ajax请求，以确保当用户启动20 Ajax请求在2秒内，他们会按顺序执行？

My question is, how would I go about avoiding the AJAX spinner and "streamlining" ajax requests to ensure if a user initiates 20 ajax requests in 2 seconds, that they will be executed in order?

我并不真的需要code的例子，刚接受或流行的技术/想法。或者，如果我要完全偏离轨道在这里。

I don't really need code examples, just accepted or popular techniques/ideas. Or if I'm going completely off track here.

感谢您

推荐答案

更新

使用异步JavaScript库而不是此实现你想要什么

use async javascript library instead of this to achieve what you want

低于老

在使用阵列或方面到目前为止好的答案排队，以确保它们被加载并在一个时间返回之一。我将消除微调一起类似于如何Gmail不会，只有消息的用户只在必要时。有一个在困扰着所有这些微调交易的用户没有意义。他们只是看起来像小机器人一孔反正。下面是一些code做我刮起。

So far good answers in terms of using an array or queue to ensure they are loaded and returned one at a time. I would eliminate the spinner all together similar to how gmail does and only message the user only when necessary. There is no point in bothering the user about all these spinner deals. They just look like little robot a-holes anyways. Here is some code to do I whipped up.

由于我一点头就这一点，我将解释其功能。

Since I got a nod on this I will explain its features.

1. 停止队列如果发生错误
2. 在继续队列中成功发生
3. 在有/事件处理程序的成功方面的错误

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

I write plugins so is this an idea worthy of a plugin? I don't think so but hey you never know.

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"
    } 
});

和你就大功告成了。

这篇关于AJAX精简技术？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！