窗口检测到莫名其妙的滚动

Question

我有一个相当简单的函数来检测窗口滚动。当用户停止滚动时触发超时事件（500 毫秒）。然后监听器和超时结束。然后我将窗口动画（GSAP）到某个点。动画完成后，侦听器将再次启动。有时......再次检测到滚动，因此整个函数被触发两次。请查看控制台以查看此情况。

代码在这里：

var timeout;
var onScroll = function() {
  console.log('scrolling...');
  if(timeout) {
    clearTimeout(timeout);
    timeout = null;
  }

  timeout = setTimeout(function () {
    console.log('done scrolling... stop listening...');
    $(window).off( "scroll", onScroll);
    clearTimeout(timeout);
    timeout = null;

    // aniamte scroll
    console.log('start animating scroll...');
    TweenMax.to($(window), 0.1, {scrollTo:{y:500}, onComplete:function(){
      $(window).on( "scroll", onScroll);
      console.log('done animating scroll. Start litening again.');
    }});

  }, 500);
}
$(window).on( "scroll", onScroll);

示例：http://codepen.io/rgbjoy/pen/RGVLBK?editors=0011

这是怎么回事？我应该问量子理论家吗？

Answer 1

看起来你的 onComplete 函数在 scrollTo 补间完成之前被调用了。

我将 onScroll 中的控制台日志语句更改为：

console.log('scrolling to ' + window.pageYOffset );

然后我在日志中看到了这个：

"scrolling to 341"
"scrolling to 340"
"scrolling to 338"
"done scrolling... stop listening..."
"start animating scroll..."
"done animating scroll. Start litening again."
"scrolling to 500"
"done scrolling... stop listening..."
"start animating scroll..."
"done animating scroll. Start litening again."

所以“滚动到 500”似乎来自调用 onComplete 方法后的补间完成。

我不确定解决方案是什么，因为这似乎是 TweenMax 中的一个错误。