javascript - jquery - 如何执行递归函数来重置/维护滚动事件的时间延迟

Question

我正在尝试使用 http://spritely.net/ 中的库制作动画。我通过使用 .onscroll() 触发它 - 但我努力阻止滚动事件频繁触发，并且它使动画速度加快太多，因为 .onscroll() 每秒调用它多次启动

通过根据当前时间设置变量，我可以在第一次滚动时停止频繁触发滚动事件

我无法保持后续滚动事件的延迟，每次滚动后变量的效果越来越差

如何保持滚动只触发动画在每个滚动事件启动一次，以便无论我通过启动和停止滚动多少次启动和停止动画，它都保持恒定的速度？ 这是演示 http://jsfiddle.net/fGmbe/109/

这是代码

var t, l = (new Date()).getTime(), scrolling = false;

$(window).scroll(function(){
var now = (new Date()).getTime();

if(now - l > 800 && !scrolling ){
     $('#bird').sprite({fps:6, no_of_frames: 16, rewind: true   });
    l = now;

}

clearTimeout(t);
t = setTimeout(function(){
    if (!scrolling)
       $('#bird').spStop()
}, 300);
 });


  var a, b = (new Date()).getTime(), scrolling = false;
  $(window).scroll(function() {
  var nw = (new Date()).getTime();
  if(nw - b > 800 && !scrolling ){
  $('#bird').spStart({fps:8, no_of_frames: 16, rewind: true })
  l = nw;
    }
   });

 var c, d = (new Date()).getTime(), scrolling = false;
 $(window).scroll(function() {
  var nx = (new Date()).getTime();
  if(nx - d > 800 && !scrolling ){
  $('#bird').spStart({fps:8, no_of_frames: 16, rewind: true })
  l = nx;
    }
   });

Answer 1

要为某个事件仅触发一次处理程序，请去抖动它!

http://benalman.com/projects/jquery-throttle-debounce-plugin/

如果事件在设定的时间内再次触发，则处理程序将被延迟。

编辑:

如何实现您想要的功能的快速示例。请注意我传递给 $.debounce 的第二个参数，它是一个 bool 值，定义事件处理程序是否应在事件开始时或结束时运行。

http://jsfiddle.net/nubwG/

$(function(){
    $(window).scroll($.debounce(500, true, startSomething));
    $(window).scroll($.debounce(500, false, stopSomething));

    function startSomething(){
        // start animating here
    }

    function stopSomething(){
        // stop animating here
    }
});