使用 requestAnimationFrame 添加限制？

Question

在下面的代碼中，我根據div (shadeFinder) 在 x 軸上滾動的距離成功地更改了左右箭頭的color 。 我想在此代碼中添加節流。 有人可以解釋如何嗎？ 我有下面 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;
  }
});

Answer 1

requestAnimationFrame API采用返回時間戳的回調函數（此處我將使用 RAF 作為簡寫）。 如果想用JS做動畫，后面可以用時間戳調用cancelAnimationFrame 。 但如果僅用於節流，您暫時不需要存儲此值。

由於您已經有一個名為last_known_scroll_position的變量在doSomething中使用，因此您不必將scrollLeft值傳遞給 RAF 函數，而是在將last_known_scroll_position設置為當前scrollLeft值之后將doSomething作為回調傳遞滾動事件。

該回調將接收一個timestamp參數，但您不需要它。 回調可以根據last_known_scroll_position的計算更新顏色。

請參見下面的示例。

 function changeArrowColor(){ var shadeFinder = document.querySelector('.fms-wrapper'); let leftArrow = document.querySelector('.prev'); let rightArrow = document.querySelector('.next'); let last_known_scroll_position = 0; function doSomething(timestamp) { let scroll_pos = parseInt(last_known_scroll_position/10); let color = `rgb(${scroll_pos},${scroll_pos},${scroll_pos})`; console.clear() console.log({timestamp, color, last_known_scroll_position}); leftArrow.style.color = color; rightArrow.style.color = color; } shadeFinder.addEventListener('scroll', function(e) { last_known_scroll_position = shadeFinder.scrollLeft; requestAnimationFrame(doSomething); }); } document.addEventListener("DOMContentLoaded", changeArrowColor);

 body { padding:0; margin:20px 0; }.fms-wrapper { height: 80px; width: 100%; max-width: 100vw; overflow-y: hidden; overflow-x: scroll; position: relative; padding: 0 30px; margin: 0 5px; box-sizing: border-box; z-index:0; margin: 0; }.prev, .next { position: fixed; z-index: 5; width: 30px; height: 50px; font-size: 28px; line-height: 50px; box-sizing: border-box; cursor:pointer; color: black; background: white; box-shadow: 0 0 5px rgba(0,0,0,.5); text-align: center; pointer-events: auto; }.prev { left: 5px; }.next { right: 5px; }.fms-content { width: 400%; height: 50px; background: linear-gradient(90deg, #f0f0f0 0%, #f0f0f0 25%, #919191 25%, #919191 50%, #f0f0f0 50%, #f0f0f0 75%, #919191 75%, #919191 100%); box-sizing: border-box; margin: 0; padding: 0; }

 <div class="fms-wrapper"> <div class="prev" tabindex="0"><</div> <div class="next" tabindex="0">></div> <div class="fms-content"></div> </div>