1

我试图使用来自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;
    }
   });
4

1 回答 1

1

要为一个事件触发一次处理程序，debounce它！

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

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

编辑：

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

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
    }
});
于 2013-10-16T16:49:34.797 回答