jjzjj

JavaScript setTimeout() 在重负载下变慢

coder 2025-02-05 原文

我创建了一个使元素背景颜色变淡的脚本。我使用 setTimeout() 每 5 毫秒对颜色进行一次增量更改。如果我一次只淡化一个事物的背景颜色，脚本会很好用，但是如果我有，比如说，50 个元素，我一次全部淡化，速度比 5 毫秒慢得多，因为所有同时运行的并发 setTimeout()。例如，通常应该在 1 秒内执行的淡化，如果我一次淡化 50 个元素，则可能需要 30 秒。

有什么办法可以克服这个问题吗？

如果有人有想法，这里是脚本:

function fadeBackground(elementId, start, end, time) {
    var iterations = Math.round(time / 5);

    var step = new Array(3);

    step[0] = (end[0] - start[0]) / iterations;
    step[1] = (end[1] - start[1]) / iterations;
    step[2] = (end[2] - start[2]) / iterations;

    stepFade(elementId, start, step, end, iterations);
}

function stepFade(elementId, cur, step, end, iterationsLeft) {
    iterationsLeft--;

    document.getElementById(elementId).style.backgroundColor
        = "rgb(" + cur[0] + "," + cur[1] + "," + cur[2] + ")";

    cur[0] = Math.round(end[0] - step[0] * iterationsLeft);
    cur[1] = Math.round(end[1] - step[1] * iterationsLeft);
    cur[2] = Math.round(end[2] - step[2] * iterationsLeft);

    if (iterationsLeft > 1) {
        setTimeout(function() {
            stepFade(elementId, cur, step, end, iterationsLeft);
        }, 5);
    }
    else {
        document.getElementById(elementId).style.backgroundColor 
            = "rgb(" + end[0] + "," + end[1] + "," + end[2] + ")";
    }
}

它是这样使用的:

fadeBackground("myList", [98,180,232], [255,255,255], 1000);

最佳答案

这是一个 article来自 Google，作者在其中讨论了他们在 Gmail 计时器方面的工作。他们发现，如果使用大量且快速的定时器，使用单个高频定时器比使用多个定时器更快。

您可以有一个每 5 毫秒触发一次的计时器，并将所有需要淡出的元素添加到一个数据结构中，该数据结构跟踪它们在淡出过程中的位置。然后您的计时器可以查看该列表并在每次触发时为每个元素执行下一个淡入淡出。

另一方面，您是否尝试过使用像 Mootools 这样的库？或 JQuery而不是推出自己的动画框架？他们的开发人员已投入大量工作来优化这些类型的操作。

关于JavaScript setTimeout() 在重负载下变慢，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1209173/

重负JavaScriptiterationsLeftsectionendsettimeout

有关JavaScript setTimeout() 在重负载下变慢的更多相关文章

  1. ruby - 带有 ruby​​ 语法高亮的 Vim 变慢 - 2

    我已经使用vim而不是ssh工作了一两个星期，一切都很顺利。今天我决定添加一些语法高亮、自动完成和其他一些通用插件。设置vundle并开始工作。我当前的.vimrc可以在https://github.com/scottopell/dotfiles/blob/master/.vimrc找到我已将我的vimrc和vim文件克隆到我的本地ubuntu桌面上，并且vim完全按预期运行，我能找到的任何文件都没有变慢。相同的插件和相同的vimrc并且在ruby​​文件上没有缓慢。更新我可以用下面的.vimrc重现这个问题syntaxon和一个空的~/.vim文件夹。但是，此vps上的vim对于ru

  2. ruby - 是什么让 Ruby 变慢了？ - 2

    关闭。这个问题需要更多focused.它目前不接受答案。想改进这个问题吗？更新问题，使其只关注一个问题editingthispost.关闭8年前。ImprovethisquestionRuby在某些事情上很慢。但它的哪些部分最有问题？垃圾收集器对性能的影响有多大？我知道我曾经有过单独运行垃圾收集器需要几秒钟的时间，尤其是在使用OpenGL库时。我在Ruby中使用过矩阵数学库，速度特别慢。ruby实现基础数学的方式有问题吗？Ruby中是否有任何无法有效实现的动态特性？如果是这样，其他语言如Lua和Python如何解决这些问题？最近有没有显着提高性能的工作？

  3. JavaScript:更长的键是否会使对象查找变慢？ - 2

    问题标题几乎说明了一切:更长的键是否会导致查找速度变慢？是:someObj["abcdefghijklmnopqrstuv"]慢于:someObj["a"]另一个子问题是用作键的字符串中字符的类型是否重要。字母数字键字符串更快吗？我尝试做一些研究；网上似乎没有太多关于此的信息。任何帮助/见解将不胜感激。 最佳答案 一般不会。在大多数语言中，字符串文字是“interned”，这会对它们进行哈希处理并使它们的查找速度更快。一般来说，不同的javascript引擎之间可能存在一些差异，但总体而言，如果它们实现得好(咳IE咳)，它应该是相当

  4. JavaScript setTimeout() 在重负载下变慢 - 2

    我创建了一个使元素背景颜色变淡的脚本。我使用setTimeout()每5毫秒对颜色进行一次增量更改。如果我一次只淡化一个事物的背景颜色，脚本会很好用，但是如果我有，比如说，50个元素，我一次全部淡化，速度比5毫秒慢得多，因为所有同时运行的并发setTimeout()。例如，通常应该在1秒内执行的淡化，如果我一次淡化50个元素，则可能需要30秒。有什么办法可以克服这个问题吗？如果有人有想法，这里是脚本:functionfadeBackground(elementId,start,end,time){variterations=Math.round(time/5);varstep=newA

  5. 使用数组时 Javascript 向后循环变慢？ - 2

    我们中的许多人可能已经知道这一点:varlist=...varindex=list.lengthwhile(index--){//dosomething}这被认为是在javascript中执行循环的最快方法，因为您可以避免额外的测试。到目前为止，在过去的几年里，我在处理速度很重要而顺序并不重要的数据时使用了这种技术。但现在我偶然发现一篇文章说处理数组时这实际上更慢。Whichmakesyouavoidanextratest(comparedtothestandardforloop).Butyouknowwhat?thiswillbemuchslowerthanusingtheright

  6. javascript - jQuery scrollTo 但在两者之间变慢 - 2

    我正在使用一个简单的代码块(基于“ScrollToPostswithjQuery”，它允许您单击下一个/上一个链接，它会跳转到每个帖子的顶部。我有我的HTML结构，所以它是post>image>post>image等等。我想知道是否有可能如果您单击下一个/上一个按钮，它会像往常一样滚动到下一个帖子，但它会悬停/悬停在中间的图像/div上？所以它最终完成了它的滚动，但在其间的div上变慢了。这是我的jQuery代码:$(function(){functiona(f){varb,e,c=[],d=$(window).scrollTop(),g=$('.section-slide');g.e

  7. javascript - 为什么卡住的 "enum"变慢了？ - 2

    为了访问数组中的数据，我创建了一个类似于enum的变量，以便为字段提供人类可读的标识符。varcolumns={first:0,second:1};vararray=['first','second'];vardata=array[columns.first];当我发现Object.freeze时，我想将其用于枚举以使其无法更改，并且我希望VM能够利用此信息发挥其优势。事实证明，测试在Chrome和Node上变慢，但在Firefox上稍快(与通过数字直接访问相比)。代码可在此处获得:http://jsperf.com/array-access-via-enum以下是来自Node的基准测

  8. javascript - 如何处理浏览器中显示数据的重负载处理 - 2

    上下文我们有一个基于Ember的应用程序，可以处理大量结构化数据(业务流程模型)。重要!我们真的希望尽可能让我们的应用程序保持离线状态。需求虽然我们只需要显示这些数据、编辑它们等等，但雷达中没有任何阻碍...但现在，我们想对这些模型应用处理:有效性检查、路径查找......以及几种耗时/内存消耗的算法。问题我们可以在服务器上处理算法，但这会终止应用程序的离线模式。我们考虑过webworker来避免在后台卡住应用程序和进程算法，但我们面临一个主要问题:将数据传递给worker时会出现数据重复。使用TransferableObjects会使应用程序至少在计算期间失去所有权(和数据)，因此它

  9. javascript - 为什么这段 JavaScript 代码经过 Node.js 优化后运行速度变慢了 - 2

    我正在为ICPC创建一个解决方案使用JavaScript和Node.js的问题当我遇到一个有趣的问题时:在某些情况下，我的程序在同一数据集上的运行速度会慢两倍。我精简了它，直到我得到这个演示行为的最小示例:functionsolve(arr){consttotal=arr.reduce((a,c)=>a+c,0);constcount=arr.length;for(leti=0;i这是使用Nodev10.15.1运行node--trace-optcode.js的输出:[marking0x005062b82521foroptimizedrecompilation,reason:small

  10. javascript - 动态变量而不是静态变量导致 JS 变慢？ - 2

    我有一个库，它经常使用Node的“getAttribute”函数。因此，如果我有node[getAttributeStr]()，而不是将它作为node.getAttribute()，我可以将getAttributeStr作为本地字符串值“getAttribute”，这将被缩小以减少代码的大小。我的问题是，如果我对所有最常用的函数名都这样做，与直接使用静态名称访问函数相比，它会减慢执行速度吗？node.getAttribute("abc");上面的代码将被替换为。vargetAttributeStr="getAttribute";node[getAttributeStr]("abc")我

随机推荐