How to let a function run after some time?

Question

I have a javascript code ( jquery ) and it performs a function when I move the scroll of the mouse, however, it performs the function several times when I take a whole turn in the scroll. I didn’t want this to happen, wanted him to be able to run again after a while. Does anyone know how I could do this?

$(window).bind('mousewheel', function (event) {
    if (event.originalEvent.wheelDelta >= 0) {
        $('.flexhome').flexslider('prev');
        console.log('passa_slide');
        return false;
    } else {
        $('.flexhome').flexslider('next');
        console.log('volta_slide');
        return false;
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Above it takes the Prev and next function of the flexslider, when I turn to one side it runs the Prev, and when I turn to the other it runs the next. But if you spin the ball enough, it runs the Prev or next several times, passing several slides.

Answer 1

You need a function that mocks, that is: avoid being called until a certain time has passed since the last call.

I use it a lot with mouse events.

An example would be like this:

function debounce(fn, delay) {
  var timer = null;
  return function () {
    var context = this, args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function () {
      fn.apply(context, args);
    }, delay);
  };
}

and then you can use/call it that:

var funcaoMagica = debounce(function (event) {
    if (event.originalEvent.wheelDelta >= 0) {
        $('.flexhome').flexslider('prev');
        console.log('passa_slide');
        return false;
    } else {
        $('.flexhome').flexslider('next');
        console.log('volta_slide');
        return false;
    }
}, 250);
$(window).bind('mousewheel', funcaoMagica);