0

我正在开发一个主要针对手机和平板电脑的网站。我只是想问一下使用太多的Interval有什么缺点吗？至于现在，我使用 1 个 5000 毫秒的间隔来获取和检查当前时间，并使用 1 个 100 毫秒的间隔来检查设备的宽度是否发生变化（用于响应目的）

我听前辈说过，我们应该尽量少使用这些间隔，这可能会导致一些漏洞和滞后等。这是真的吗？

4

3 回答 3

1

这里的两位受访者都有正确的想法——浏览器可以在调整大小时告诉你，以避免你不断检查和比较缓存值，这将是非常糟糕的性能。但是你的前辈关于不必要的调用的论点仍然是正确的，因为许多浏览器在调整大小操作（尤其是 IE）期间不断触发调整大小，这可能会导致大量开销。

减轻这些性能问题的两种想法的组合是使用一种称为“节流”的技术来监听事件，但只是每隔一段时间触发一次响应。

这里有一个很好的插件：http: //benalman.com/projects/jquery-throttle-debounce-plugin/

在我看来，一个健康的限制是每秒不超过 6-7 次调用，即只允许最终函数每 150 毫秒运行一次（从@Tsunamis 的回答开始）：

$(window).resize($.throttle(150, function(){ /* do something */ }));
于 2012-10-31T11:13:30.117 回答
1

更新：
检查此页面，以及所有感兴趣的链接文章：特别是 Web Workers、Asynchronous events 和 Timeout

使用间隔的主要缺点是我所知道的所有当前 JS 实现都是单线程的。因此，如果您设置一个间隔以每 100 毫秒调用一次函数，然后每 500 毫秒调用另一个函数，则这些间隔将不会同时执行。如果您严重依赖在使用第二个间隔执行的代码中返回的第一个间隔，那么您迟早会遇到麻烦。

您可能会注意到的另一件事是间隔不是很准确。100ms 应该被看成是~100ms，毫无疑问，设定的时间间隔和实际的时间间隔可能相差很大（100ms 的时间间隔很容易变成 150ms）。

最重要的是，你的主管是对的，尽可能避免。但是，有时别无选择，只能使用间隔。在这种情况下，列出所有区间，找到最小公分母并设置一个大区间，当“他们的时间到了”时，该区间使用闭包调用各种函数

var allIntervals = (function()
{
    var interval100MS = function(){};
    var interval200MS = function(){};//etc...
    var timesCalled = 0;
    var timer = setInterval(function()
    {
       if (++timesCalled%2)
       {
           return interval100MS();
       }
       interval100MS();
       return interval200MS();
    },100);
    return timer;//<-- expose so you can clear the interval, of course
}());

您可以扩展它以返回一个对象，该对象允许您设置额外的间隔、更改主要间隔时间、取消设置某些间隔等...

编辑
我忽略了您使用间隔的事实。那只是没有必要：window.onresize或者window.addEventListener('resize',handlerFunction,false);会这样做。在幕后，JS 有一个事件循环/循环，它比任何类型的自制代码更有效地处理事情。
人们常说，最好的开发人员本质上是懒惰的人：他们会经历很多麻烦，只是为了确保他们需要的东西以前没有做过。如果他们发现了可以满足他们需要的东西，他们会使用它，而不是自己编写相同的东西。

无论如何，我已经在我的答案的最上面添加了一个链接，我将在这里再次添加它。检查一下，尤其是对web workers的引用，如果你检查时间（不确定你在那里做什么/为什么/做什么），这可能会很有用。

于 2012-10-31T11:16:01.330 回答
0

您将任务设置为每 X 秒执行一次。这些任务需要 CPU 时间并降低您网站的性能。当然，这取决于您在这些任务中所做的工作。但是，如果您这样做，即每 1000 毫秒而不是 5000 毫秒，您的性能就会降低。因此，为您的间隔选择尽可能高的值总是更好的选择。

如果您使用的是 jQuery，您可以使用以下代码来检查设备宽度的变化，这将比您自己的间隔实现使用更少的性能：

$(window).resize(function() { /* do something */ });
于 2012-10-31T11:02:01.760 回答