Javascript 使用requestAnimationFrame添加限制？

在下面的代码中，我根据

div

（shadeFinder）在x轴上的滚动距离成功地更改了左右箭头的

颜色。我想在此代码中添加限制。有人能解释一下吗？我有下面w3Schools的例子，但发现很难将其合并到我的代码中

//change the color of mobile arrows based on where the shadefinder is on X-axis
function changeArrowColor(){
  var shadeFinder = document.querySelector('.fms-wrapper');
  let leftArrow = document.querySelector('.prev');
  let rightArrow = document.querySelector('.next');
  let last_known_scroll_position = 0;
  let ticking = false;

  function doSomething(scroll_pos) {
    scroll_pos = parseInt(scroll_pos/10);
    leftArrow.style.color = `rgb(${scroll_pos},${scroll_pos},${scroll_pos})`;
    rightArrow.style.color = `rgb(${scroll_pos},${scroll_pos},${scroll_pos})`;
  }

  shadeFinder.addEventListener('scroll', function(e) {
    last_known_scroll_position = shadeFinder.scrollLeft;         
    doSomething(last_known_scroll_position);
  });   
}

带有限制的Mozilla滚动事件示例：

// Reference: http://www.html5rocks.com/en/tutorials/speed/animations/

let last_known_scroll_position = 0;
let ticking = false;

function doSomething(scroll_pos) {
  // Do something with the scroll position
}

window.addEventListener('scroll', function(e) {
  last_known_scroll_position = window.scrollY;

  if (!ticking) {
    window.requestAnimationFrame(function() {
      doSomething(last_known_scroll_position);
      ticking = false;
    });

    ticking = true;
  }
});

接受一个返回a的回调函数（在此我将使用RAF作为缩写）。如果要使用JS制作动画，可以稍后使用时间戳调用
cancelAnimationFrame
。但要仅用于节流，目前不必存储此值

由于您已经有一个名为
last\u known\u scroll\u position
的变量，其作用域为
doSomething
，因此您不必将
scrollLeft
值传递给RAF函数，但是，在滚动事件发生时，将
上次已知的滚动位置设置为当前
滚动左
值后，将
doSomething
作为回调传递

该回调将接收一个
timestamp
参数，但您不需要它。回调可以根据
上次已知的\u滚动\u位置的计算更新颜色

请参见下面的示例


函数更改箭头颜色（）{
var shadeFinder=document.querySelector（'.fms wrapper'）；
让leftArrow=document.querySelector（'.prev'）；
设rightArrow=document.querySelector（'.next'）；
让最后一个已知滚动位置=0；
函数doSomething（时间戳）{
让scroll\u pos=parseInt（最后一个已知的\u scroll\u位置/10）；
让color=`rgb（${scroll\u pos}，${scroll\u pos}，${scroll\u pos}）`；
控制台清除（）
log（{timestamp，color，last\u known\u scroll\u position}）；
leftArrow.style.color=颜色；
rightArrow.style.color=颜色；
}
shadeFinder.addEventListener（'scroll'，函数（e）{
最后一个已知的滚动位置=shadeFinder.scrollLeft；
请求动画帧（doSomething）；
});   
}
document.addEventListener（“DOMContentLoaded”，changeArrowColor）
正文{
填充：0；
利润率：20px0；
}
.fms包装机{
高度：80px；
宽度：100%；
最大宽度：100vw；
溢出y：隐藏；
溢出-x：滚动；
位置：相对位置；
填充：0 30px；
利润率：0.5px；
框大小：边框框；
z指数：0；
保证金：0；
}
.prev，.next{
位置：固定；
z指数：5；
宽度：30px；
高度：50px；
字号：28px；
线高：50px；
框大小：边框框；
光标：指针；
颜色：黑色；
背景：白色；
盒影：0.5pxRGBA（0,0,0,5）；
文本对齐：居中；
指针事件：自动；
}
上一篇{
左：5px；
}
.下一个{
右：5px；
}
.fms内容{
宽度：400%；
高度：50px；
背景：线性梯度（90度，#f0 0%，#f0 25%，#919191 25%，#919191 50%，#f0 50%，#f0 75%，#919191 75%，#919191 100%）；
框大小：边框框；
保证金：0；
填充：0；
}

感谢您的深入回答！非常感谢。但有一个问题，这是如何被限制的？每次滚动时，它似乎仍在打印一百万次时间戳。。当然它应该少打印控制台日志吗？@alecbaldwin我添加了控制台，这样你就可以看到发生了什么。但它并没有使用传统的节流，因为它被设计为与浏览器重绘同步。从文档中：
这将要求在浏览器执行下一次重新绘制之前调用动画函数。回调次数通常为每秒60次，但根据W3C建议，通常与大多数web浏览器中的显示刷新率相匹配。