Bootstrap slider with slideStop event

javascript, jquery, slider

Solution

OK I'm gonna give this a try. I guess you are using the bootstrap slider plugin/add-on https://github.com/seiyria/bootstrap-slider or a similar fork.

So what you would want to do is to firstly cancel the `setTimeout` on `slideStart` and reinstate it on `slideStop`. However if an ajax request started before the slider was moved and returns during drag you also don't want to update the contents of the div.

The code would go a little like this:

Javascript:

$(document).ready(function () {
    var intSeconds = 1;
    var refreshId;

    //set a flag so we know if we're sliding
    slideStart = false;
    $('#ex1').slider();
    $('#ex1').on('slideStart', function () {
        // Set a flag to indicate slide in progress
        slideStart = true;
        // Clear the timeout
        clearInterval(refreshId);
    });

    $('#ex1').on('slideStop', function () {
        // Set a flag to indicate slide not in progress
        slideStart = false;
        // start the timeout
        refreshId = setInterval(function () { // saving the timeout
            sTimeout();
        }, intSeconds * 3000);
    });

    //Change the sTimeout function to allow interception of div content replacement
    function sTimeout() {
        $.ajax({
            url: 'page.php',
            dataType: 'html',
            success: function (response) {
                if (slideStart) {
                    // slide in progress so bail out.
                    return;
                } else {
                    // slide not in progress so go ahead.
                    $("#mydiv").html(response);
                }
            },
            error: function () {
                // handle your error here
            }
        });
    }


    refreshId = setInterval(function () { // saving the timeout
        sTimeout();
    }, intSeconds * 3000);
});

Problem

I have a bootstrap slider on my page. I don't know how can I change this code, that the page.php will not be constanly loading while dragging the slider, but only when I stop dragging it (after the desired period of time). Probably I have to use slideStop event, but don't know how. ``` <script type="text/javascript"> $(document).ready(function() { var intSeconds = 1; var refreshId; function sTimeout() { $("#mydiv").load("page.php"); // load content refreshId = setTimeout(function() { // saving the timeout sTimeout(); }, intSeconds *3000); } sTimeout(); $.ajaxSetup({cache: false}); // The slider $("#ex1").slider({ min : 1, // minimum value max : 20, // maximum value step : 1, value : intSeconds, // copy current value formater: function(value) { // option to format the values before they are sent to the tooltip clearTimeout(refreshId); // clear it intSeconds = value; // update value sTimeout(); // restart it return value*3 + ' s'; } }); }); </script> ```

Original source