javascript – 带有slideStop事件的Bootstrap滑块

我的页面上有一个引导滑块.我不知道如何更改此代码,拖动滑块时page.PHP不会一直加载,但只有当我停止拖动它时(在所需的时间段之后).可能我必须使用slideStop事件,但不知道如何.

<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>

解决方法:

好的,我要试一试.我猜你正在使用bootstrap slider插件/附加组件https://github.com/seiyria/bootstrap-slider或类似的fork.

所以你想要做的是首先取消slideStart上的setTimeout并在slideStop上恢复它.但是,如果在移动滑块之前启动了ajax请求并在拖动期间返回,则您也不希望更新div的内容.

代码有点像这样：

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