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

要为事件触发一次处理程序，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
    }
});

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

1 个答案: