如何提供动态（计算的）css属性

Question

我正在执行一项任务，其中每当用户滚动或调整屏幕大小时，我都希望重新计算元素的CSS属性。

假设我想暗示。 进度条，并根据窗口中的滚动位置报告进度

<div class='progress-bar-wrap'>
   <div class='progress-bar-progress'></div>
</div>

function updateScrollProgress () {
   this.progressIndicator.css('width', this.calculateProgressBarWidth() + 'px');
}

我试图抓住滚动和调整事件的大小，但这似乎效果不佳。

window.on('scroll', updateScrollProgress)
window.on('resize', updateScrollProgress)

我在滚动和尝试调整事件处理程序的大小以尝试requestAnimationFrame

window.on('scroll', function(){window.requestAnimationFrame( updateScrollProgress))
window.on('resize', function(){window.requestAnimationFrame( updateScrollProgress))

在大多数浏览器中都经历了巨大的改进，但是偶尔还是有些落后。

我尝试从requestAnimationFrame处理程序请求另一个框架：

function updateScrollProgress () {
   window.requestAnimationFrame( updateScrollProgress)
   this.progressIndicator.css('width', this.calculateProgressBarWidth() + 'px');
}

这完全消除了滞后效应，但是，即使不需要重新计算，也要无休止地调用此方法。

有没有一种方法可以在浏览器决定绘制元素之前挂接处理程序，以便为属性提供/设置那些“动态” css值？

Answer 1

当您使用requestAnimationFrame时，您正在做什么。 如果您已经摆脱了使用它的滞后，则不清楚您为什么说该函数“经常运行”。 通常，在这种情况下，“太频繁”的意思是“造成延迟”（通过频繁运行和放慢速度）。 如果不是，那...？

如果您希望处理程序的调用频率降低，则可以对其进行反跳，但是您可能会注意到想要的更改之前有所延迟（因为已被反跳），这听起来像是您要避免的事情。

无论如何，至少到目前为止， requestAnimationFrame是“就在浏览器呈现框架之前”作业的正确工具。

Answer 2

通过去抖功能包装事件功能：

有关反跳功能的更多信息，请参见：

https://davidwalsh.name/javascript-debounce-function

function debounce(func, wait, immediate) {
  var timeout;
  return function() {
    var context = this, args = arguments;
    var later = function() {
      timeout = null;
      if (!immediate) func.apply(context, args);
    };
    var callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) func.apply(context, args);
  };
};

var myEfficientFn = debounce(function() {
  // All the taxing stuff you do
}, 250);

window.addEventListener('resize', myEfficientFn);