javascript - 窗口莫名检测到滚动

Question

我有一个相当简单的函数来检测窗口滚动。当用户停止滚动时触发超时事件 (500ms)。这结束然后听众和超时。然后我将窗口动画化(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 中的一个错误。