Question

当听到由js native element.scrollIntoView引起的滚动事件时，lodash的debounce功能无法正常工作

HTML

<nav>
<button id="btn1" onclick="goTo(1)">1</button>
<button id="btn2" onclick="goTo(2)">2</button>
</nav>
<div id="el1">1</div>
<div id="el2">2</div>

JS

function goTo(x) {
 const elm = document.getElementById(`el${x}`);
  elm.scrollIntoView({
    behavior: "smooth",
    block: "start"
  });
  let func = _.debounce(() => {
    document.documentElement.scrollBy({
      top: -20,
      behavior: "smooth"
  })
}, 500)
  document.addEventListener('scroll', e => {
    func()
  })
}

问题复制： https://jsfiddle.net/do6bqfx7/4/

Answer 1

不是debounce。请注意，scrollBy中调用的func也是一个滚动条 - 这就是为什么它会被func的延迟调用再次一次又一次地延迟处理。你真正需要的是使func成为一个（有效的）单次事件处理程序。一种可能的方法（demo）：

function goTo(x) {
  const elm = document.getElementById(`el${x}`);
  elm.scrollIntoView({
    behavior: "smooth",
    block: "start"
  });
  let func = _.debounce(() => {
    document.removeEventListener('scroll', func);
    document.documentElement.scrollBy({
      top: -20,
      behavior: "smooth"
    });
  }, 500);
  document.addEventListener('scroll', func);
}

当行为：平滑时，debounce不能与js scrollIntoView一起使用

1 个答案: