Question

似乎很容易解决，但我似乎无法得到它。我需要在JavaScript中限制或去抖我的滚动，以便幻灯片只跳到下一张幻灯片。目前它正在计算滚动点击的次数，然后滚动那么多幻灯片。我在WordPress网站上使用革命滑块。

我有当前代码使鼠标滚动使用幻灯片跳到下一张幻灯片。

＆＃13;

(function() {
	
	// change "revapi1" here to whatever API name your slider uses (see notes below)
	var slider = revapi1;
	
	slider.parent().on('mousewheel DOMMouseScroll', function(event) {
		
		if(event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
		
			slider.revprev();
			
		}
		else {
		
			slider.revnext();
            
			
		}
		
	});
	
})()

＆＃13;

但是你可以在www.bladeworks.co.za/blade_website_new上看到问题，它会根据完成的鼠标滚动跳过幻灯片。

无论如何，我可以编辑这段代码，只是跳过一张幻灯片，只去下一张？

我很感激帮助。

Answer 1

   function throttle(fn, threshhold, scope) {
        threshhold || (threshhold = 250);
        var last,
        deferTimer;
    return function () {
        var context = scope || this;

        var now = +new Date,
        args = arguments;
        if (last && now < last + threshhold) {
        // hold on to it
             clearTimeout(deferTimer);
             deferTimer = setTimeout(function () {
             last = now;
             fn.apply(context, args);
        }, threshhold);
        } else {
             last = now;
             fn.apply(context, args);
        }
    };
 }

从这里simple throttle function

引用

  element.on('mousewheel DOMMouseScroll',throttle(function(){
      ...
  }))

或者您可以使用＆＃34;锁定＆＃34;在滑块移动时锁定事件处理程序：

  element.on('mousewheel DOMMouseScroll',function(){
      if(!element.hasClass('locked')){
          element.addClass('locked');
          ...//process, move next, move previous
          element.removeClass('locked');
      }
  })

这个很容易理解

完整的一个：

 (function() {


       var slider = revapi1;

       slider.parent().on('mousewheel DOMMouseScroll',throttle(function(event) {
             if(event.originalEvent.wheelDelta > 0 ||     event.originalEvent.detail < 0) {
                slider.revprev();
             }else {
                slider.revnext();
             }
      },250));
    function throttle(fn, threshhold, scope) {
         threshhold || (threshhold = 250);
         var last,
         deferTimer;
         return function () {
             var context = scope || this;

             var now = +new Date,
             args = arguments;
             if (last && now < last + threshhold) {
                  // hold on to it
                  clearTimeout(deferTimer);
                  deferTimer = setTimeout(function () {
                       last = now;
                       fn.apply(context, args);
                  }, threshhold);
              } else {
                  last = now;
                  fn.apply(context, args);
              }
        };
     }

 })()

限制我的页面滚动，以便它只跳过一张幻灯片

1 个答案: