Throttle my page scroll so it only skips one slide

Question

seems like such an easy fix but i just cant seem to get it. I need to throttle or debounce my scroll in JavaScript so that the slide only skips to the next slide. At the moment it is counting the number of times the scroll clicks and then scrolls that many slides. I am using revolution slider on a WordPress site.

I have the current code to make the slide use on mouse scroll skip to next slide.

(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();
            
			
		}
		
	});
	
})()   

But as you can see the problem on www.bladeworks.co.za/blade_website_new it skips the slides dependent on the mouse scrolls done.

Is there anyway that I can edit this code to make it just skip one slide and go only to the next one?

I appreciate the help.

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);
        }
    };
 }

refrenced from here simple throttle function

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

Or you can use a "lock" to lock your event handler when slider is moving:

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

this one is much easy to understand

a complete one:

 (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);
              }
        };
     }

 })()