javascript - 带有 slideStop 事件的 Bootstrap slider

Question

我的页面上有一个 Bootstrap slider 。我不知道如何更改此代码，拖动 slider 时不会持续加载 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>

Answer 1

好的，我要试试这个。我猜你正在使用引导 slider 插件/附加组件 https://github.com/seiyria/bootstrap-slider或类似的 fork 。

所以您要做的是首先取消 slideStart 上的 setTimeout 并在 slideStop 上恢复它。但是，如果 ajax 请求在 slider 移动之前启动并在拖动期间返回，您也不想更新 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);
});