Question

我的页面上有一个引导滑块。我不知道如何更改此代码，拖动滑块时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

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

所以你要做的就是首先取消setTimeout上的slideStart并在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);
});

带有slideStop事件的Bootstrap滑块

1 个答案: