Question

这个问题部分取决于对jQuery内部工作原理的了解。

假设我有一个包含垂直溢出的页面，允许用户向下滚动，以及我的JS中的以下代码：

$(document).scroll(function() {
    var y = $(document).scrollTop();
    if (y > 500) {
        $("body").css("background-color", "red");
    }
    else {
        $("body").css("background-color", "blue");
    }
});

这完全没问题。但是，它可以像这样修改：

var isRed = false;
$(document).scroll(function() {
    var y = $(document).scrollTop();
    if (y > 500) {
        if (!isRed) {
             $("body").css("background-color", "red");
             isRed = true;
        }
    }
    else {
        if (isRed) {
             $("body").css("background-color", "blue");
             isRed = false;
        }
    }
});

是否有理由在第一位代码上选择第二位代码？如果我使用第一段代码，每次滚动事件被触发时，jQuery会反复应用样式吗？

我习惯了React的工作方式，只更新每次渲染都会改变的东西。 jQuery是否包含这样的功能？

两位代码完成同样的事情。额外的isRed条件使得代码的第二个版本更加冗长和复杂，但它可能会大大提高效率。它能提供任何此类好处吗？如果是这样，那么使用它而不是第一个是有意义的。

Answer 1

是的。你的第一个将每秒改变css几百次（如果滚动），第二个是一个简单而高效的去抖动器。

可能更容易：

var isRed = false;
$(document).scroll(function() {
    if (isRed !== ( $(document).scrollTop() > 500 )) {
         $("body").css("background-color", isRed?"blue":"red");
         isRed = !isRed;
    }
});

Try it

Answer 2

是否有理由在第一位代码中选择第二位代码？

是，如果您在滚动时出现性能问题。否则，无论是否重新应用该风格，都无关紧要。

如果我使用第一部分代码，每次滚动事件被触发时，jQuery会反复应用样式吗？

在每个滚动事件上，当你执行$(body).css("background-color", "red")时，jQuery需要：

创建新对象
确定您传递的字符串是选择器，而不是HTML
检查选择器是否包含jQuery扩展
查询选择器的DOM
构建结果的单项数组
循环通过该单项阵列有效地执行此操作：
```
element.style.backgroundColor = "red";
```

如果颜色与已经存在的颜色匹配，浏览器可能会忽略它。

如果你想在不使代码更复杂的情况下保存jQuery有些麻烦，可以让document.body使用它，这样就可以跳过步骤2-4。您还可以简化代码：

$(document).scroll(function() {
    var y = $(document).scrollTop();
    $(document.body).css("background-color", y > 500 ? "red" : "blue");
});

或者，如果您确实希望完全优化通话：

(function() { // To avoid making `lastColor` a global
    var lastColor;
    $(document).scroll(function() {
        var y = $(document).scrollTop();
        var color = y > 500 ? "red" : "blue";
        if (color !== lastColor) {
            lastColor = color;
            document.body.style.color = color;
        }
    });
})();

请注意，您无法将color与document.body.style.color进行比较，它们可能（通常是）采用不同的格式。

jQuery样式重新应用效率

2 个答案: