jQuery slider avoid calling event too quick

Question

I have this event function in Javascript: var slider = $('#slider'), tooltip = $('.tooltip');

        //Hide the Tooltip at first
        tooltip.hide();

        //Call the Slider
        slider.slider({
            //Config
            range: "min",
            min: 1,
            value: 35,

            start: function(event,ui) {
                tooltip.fadeIn('fast');
            },

            //Slider Event
            slide: function(event, ui) { //When the slider is sliding

                var value  = slider.slider('value'),
                    volume = $('.volume');

                tooltip.css('left', value).text(ui.value);  //Adjust the tooltip accordingly

                $.ajax({
                    dataType: "text",
                    type: "POST",
                    url: '/setVolume/',
                    data: { volume_to_set: ui.value},
                    success: function(data) {

                    }
                });

                if(value <= 5) { 
                    volume.css('background-position', '0 0');
                } 
                else if (value <= 25) {
                    volume.css('background-position', '0 -25px');
                } 
                else if (value <= 75) {
                    volume.css('background-position', '0 -50px');
                } 
                else {
                    volume.css('background-position', '0 -75px');
                };

            },

            stop: function(event,ui) {
                tooltip.fadeOut('fast');
            },
        });

Everything is working properly, but I've seen that that when I'm moving the slider, it could become a lot of requests, if I'm changing it for 10 to 30 it'll actually send 20 ajax requests. which is not so efficient... I'm trying to think of a way that it'll recognize only the "end" of the sliding motion and only then run the AJAX request. any ideas?

Answer 1

Remove it from slide and add it to stop

stop: function(event,ui) {
    tooltip.fadeOut('fast');
    /* Ajax call here */
}

Answer 2

You could use a setTimeout(); and clearTimeout();.

I would suggest creating the timeout when you slide.

var myTimeout = setTimeout(function(){
    // Run your script here.
}, 500 );

and then on your slide function, you would clear the timeout:

clearTimeout( myTimeout );

This will basically cancel the ajax call if the slide action happens again within half a second (500 milliseconds). It would be best to not redeclare the timeout variable in the slide function. Maybe scope it to your object?

https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers.clearTimeout

http://www.w3schools.com/jsref/met_win_settimeout.asp

//Hide the Tooltip at first tooltip.hide();

    //Call the Slider
    slider.slider({
        //Config
        range: "min",
        min: 1,
        value: 35,

        start: function(event,ui) {
            tooltip.fadeIn('fast');
        },

        //Slider Event
        slide: function(event, ui) { //When the slider is sliding
            var setVolume;
            clearTimeout( setVolume );
            var value  = slider.slider('value'),
                volume = $('.volume');

            tooltip.css('left', value).text(ui.value);  //Adjust the tooltip accordingly
            setVolume = setTimeout( function(){
                $.ajax({
                    dataType: "text",
                    type: "POST",
                    url: '/setVolume/',
                    data: { volume_to_set: ui.value},
                    success: function(data) {

                    }
                }, 500 );
            });

            if(value <= 5) { 
                volume.css('background-position', '0 0');
            } 
            else if (value <= 25) {
                volume.css('background-position', '0 -25px');
            } 
            else if (value <= 75) {
                volume.css('background-position', '0 -50px');
            } 
            else {
                volume.css('background-position', '0 -75px');
            };

        },

        stop: function(event,ui) {
            tooltip.fadeOut('fast');
        },
    });