Bootstrap slider with slideStop event

Question

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>

Answer 1

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