Skip a delayed event in javascript

Question

I'm trying to skip a delay event in JavaScript. Say( If I mouse wheel for 4 times continuously the first one ill get fired followed by the second, third and fourth one. In my scenario if the first event fired and when the second/third/fourth events are in delay or slow I want to speak the second and third event getting fired and must directly fire the final event (say fourth event))

Is this possible using JS/Jquery! And can anyone suggest me some sample for it if possible!

Sorry if I don’t make much sense, I am a beginner here.

Answer 1

It sounds like you're describing a debounce function, which will fire on the first event but merge subsequent events within a defined timeframe.

This plugin should achieve what you're looking for: http://benalman.com/projects/jquery-throttle-debounce-plugin/

This question and answer may also be helpful.

Based on the autocomplete example on this page, http://benalman.com/code/projects/jquery-throttle-debounce/examples/debounce/, the final (4th in your example) event should be fired, but any intermediate events that happen in quick succession will be skipped.

Here is a Stackblitz example, debouncing a mousewheel event to every 0.1s. You simply need to include the plugin and then do:

$(document).ready(function () {
    $('body').bind('mousewheel', $.debounce(100, debounceEvent));
    function debounceEvent(event) {
        // Process mouse wheel event here
        console.log(event);
    }
});

If you do a quick scroll, only the last event should be emitted.