JS脚本执行缓慢答案

【问题标题】：Slow execution of JS scriptJS脚本执行缓慢
【发布时间】：2014-03-02 14:09:39
【问题描述】：

我有一个简单的脚本来切换 onmouseover 上的帖子图像/文本。如果帖子不超过 2 个，代码可以正常工作，但是当帖子数量增加时，代码会变得非常慢。

function showPost(ele, eve) {
    var id = ele.id.replace("post-", "");
    if (typeof window['timerHide-' + id] !== "undefined") {
        clearInterval(window['timerHide-' + id]);
    }
    var target = (eve.relatedTarget) ? eve.relatedTarget : eve.toElement;
    var parent = $("post-" + id);
    if (typeof target === "undefined" || target === parent || target.parentNode === parent || target.parentNode.parentNode === parent) {
        return;
    }
    var img = $("post-img-" + id);
    var txt = $("post-txt-" + id);
    if (img.style.opacity === "") {
        img.style.opacity = 1;
    }
    var opacity = img.style.opacity;
    window['timerShow-' + id] = setInterval(function () {
        if (opacity <= 0.1) {
            clearInterval(window['timerShow-' + id]);

            img.style.display = 'none';
            txt.style.display = 'block';
            txt.style.opacity = 1;
        }
        img.style.opacity = opacity;
        img.style.filter = 'alpha(opacity=' + opacity * 100 + ")";
        opacity -= opacity * 0.1;
    }, 1);
};

另一个功能几乎与这个相同，只是它隐藏了切换的文本。

【问题讨论】：

setInterval(foo, 1) 要求很高，您每毫秒执行一次回调，考虑更高的间隔（并最终调整动画的步长）。
您甚至可能会遇到比调用时间短的间隔 => 严重问题。
对于一个听起来可以用纯 CSS 或最少脚本解决的问题的解决方案看起来相当可怕。如果您在尝试中提供一个 jsfiddle，会更容易提供帮助。
就像提到的其他 cmets 一样，为此使用 CSS 动画可能是一个更好的主意。看看stackoverflow.com/questions/11684895/… 看看是否可以适应您的情况。否则尝试增加超时。即使只是上升到 16 毫秒也将是大约 60 FPS，我认为这对于这类事情来说是相当慷慨的。或者也许尝试 requestAnimationFrame 并将不透明度基于经过的时间。然后它将尽可能顺利地运行。
那么有谁能帮我写一些代码 sn-ps 吗？真的需要你的帮助，伙计们:)

标签： javascript performance dom-events

【解决方案1】：

您似乎将区间 ID 保存到 DOM 元素中，请尝试使用变量

var timerID = setInterval(function ()
if (opacity <= 0.1)
{
    clearInterval(timerID);

【讨论】：

如果你在全局范围内，var foo; 'foo' in window; // true
在控制台中测试时，将变量写入窗口会在 setInterval 范围内返回 0。
我需要将 timer 变量设置为全局变量，以便为每个帖子设置和清除间隔。附言function $(ele) {return document.getElementById(ele);} == no JQuery
这些变量在 setInterval 函数中是否真的可用？如果是这样，提供的代码仍然不需要globals，因为您可以使用closures，这使您的代码更具可读性和安全性。