Question

目前，我正在使用setTimeout()在巨大的列表中暂停for循环，以便我可以在页面中添加一些样式。例如，

例如：http://imdbnator.com/process?id=wtf&redirect=false

我使用setTimeOut：

我使用setTimeout()添加图片，文字和css进度条（Why doesn't Progress Bar dynamically change unlike Text? 2）。

显然，正如您所看到的，用户浏览页面并将鼠标悬停在几张图片上非常痛苦。它变得非常迟钝。对此有什么解决方法吗？

我的FOR循环：

每个for循环在后台向PHP API发出ajax请求。这肯定会让我在那里付出一定的效率，但是所有其他网站如何以如此优雅的方式拉开它呢？我的意思是，我看到网站显示了一个很好的加载图像，在发出API请求时没有用户干扰。当我尝试做类似的事情时，我每次都有set a time-out。

他们是否使用了更好的服务器 - 客户端交互语言，比如我听过的 node.js ？

此外，我想到了一些替代方案，但遇到了其他并发症。如果您能帮助我解决这些可能的替代方案，我将不胜感激。

方法1：

我没有通过jQuery对我的PHP API进行AJAX调用，而是完全可以完成一个完整的服务器端脚本。但是，我遇到的问题是我无法创建一个好的客户端页面（如我当前页面中）更新进度条并在处理完每个列表项后添加动态图像。或者这可能吗？

方法2：（已编辑）

与下面的有用答案一样，我认为最大的问题是服务器API和客户端交互。他建议的Websockets看起来很有希望。它们必然会比setTimeout更好吗？是否有任何重大的时间差异让我说我将当前的1000个AJAX请求替换为websocket？

另外，如果除了websocket之外还有其他任何东西比AJAX调用更好的话，我将不胜感激。

专业网站如何解决流媒体服务器和客户端交互问题？

编辑1：请说明专业网站（例如http://www.cleartrip.com请求航班详细信息时）如何在处理服务器端时提供顺畅的客户端。

编辑2 ：正如@Syd建议的那样。这是我正在寻找的东西。我认为我当前的客户端和服务器交互有很多延迟。 Websockets似乎是一个解决方案。除了标准的AJAX之外，还有哪些其他/最佳方法可以改善服务器cleint交互？

Answer 1

您的第一个链接对我不起作用，但如果我了解您的整体问题，我会尝试解释一些可能对您有帮助的事情。

首先，在主ui线程中进行需要处理大量数据的同步调用是不好的，因为用户体验可能会受到很大影响。作为参考，您可能需要查看＆＃34; Is it feasible to do an AJAX request from a Web Worker?＆＃34;

如果我理解正确，您希望根据事件按需加载一些数据。在这里你可能想坐下来思考什么是最适合你需要的事件，每隔一段时间做一次ajax请求就大不相同了，特别是当你有大量的流量时。此外，您可能想要在初始化下一个请求之前检查先前的请求是否已完成（但在某些情况下可能不需要）。如果你想创建链式异步代码执行而不面对javascript＆＃34;金字塔的厄运＆＃34;请查看async.js。效果和杂乱的代码。

此外，您可能希望＆＃34;验证 - 停止＆＃34;在提出实际请求之前的事件。例如，让我们假设用户触发了一个＆＃34; mouseenter＆＃34;你不应该只是发起一个ajax电话。屏住呼吸使用setTimeout并检查用户是否没有触发任何其他＆＃34; mouseenter＆＃34;在接下来的250毫秒的事件，这将允许您的服务器呼吸。或者在基于滚动加载内容的实现中。如果用户像疯子一样滚动，则不应触发事件。所以验证事件。

同样循环和迭代，我们都知道，如果该死的循环太长并且重负荷，您可能会遇到不需要的结果。因此，为了克服这个问题，您可能需要查看定时循环（请参阅下面的代码段）。基本上循环在x时间后断开并在一段时间后继续。以下是一些帮助我使用three.js项目的参考资料。＆＃34; optimizing-three-dot-js-performance-simulating-tens-of-thousands-of-independent-moving-objects＆＃34;和＆＃34; Timed array processing in JavaScript＆＃34;

//Copyright 2009 Nicholas C. Zakas. All rights reserved.
//MIT Licensed
function timedChunk(items, process, context, callback){
    var todo = items.concat();   //create a clone of the original

    setTimeout(function(){

        var start = +new Date();

        do {
             process.call(context, todo.shift());
        } while (todo.length > 0 && (+new Date() - start < 50));

        if (todo.length > 0){
            setTimeout(arguments.callee, 25);
        } else {
            callback(items);
        }
    }, 25);
}

cleartip.com可能会使用其中的一些技术，而且从我所看到的内容来看，当您访问该页面时，它会获取大量数据，然后在滚动时也会获取其他块。这里的技巧是在用户到达页面底部之前稍早发出请求，以便提供流畅的体验。关于左侧过滤器，它们仅过滤掉浏览器中已有的数据，不再发出请求。因此，您可以获取并保留缓存之类的内容（在其他情况下，虽然缓存可能不适用于实时数据馈送等）。

最后如果您有兴趣进一步阅读并减少数据交易的开销，您可能需要查看＆＃34; WebSockets＆＃34;。

Answer 2

您必须使用异步AJAX调用。现在，在完成HTTP ajax请求时，用户交互被阻止。

问：“专业网站（如cleartrip.com）如何在处理服务器端时提供顺畅的客户端。”

答：使用异步AJAX调用

最佳服务器API和客户端Javascript交互方法？

2 个答案: