Javascript 带slideStop事件的引导滑块

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

$（文档）.ready（函数（）{
var intSeconds=1；
var-refreshId；
函数刺激（）{
$（“#mydiv”）.load（“page.php”）；//加载内容
refreshId=setTimeout（函数（）{//保存超时
刺激（）；
}，整数秒*3000）；
}
刺激（）；
$.ajaxSetup（{cache:false}）；
//滑块
$（“#ex1”）.滑块({
最小值：1，//最小值
最大值：20，//最大值
步骤：1，
值：intSeconds，//复制当前值
格式化程序：函数（值）{//选项，用于在将值发送到工具提示之前格式化这些值
clearTimeout（refreshId）；//清除它
intSeconds=value；//更新值
sTimeout（）；//重新启动它
返回值*3+'s'；
}
});
});

好的，我要试试这个。我猜您正在使用引导滑块插件/附加组件或类似的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);
});

---

您好，谢谢，它看起来不错，但是如果没有sTimeout（），在开始加载的部分（page.php）在我触摸滑块之前是不可见的。有一件事我不明白，为什么当我移动slider page.php时，当值大于1时，会同时加载多次？好的，看看这个测试小提琴，它应该可以满足您的需要。我还更新了答案代码。看起来不错，但在你的例子中，滑块指示器不更新时间-它总是3秒。您还可以添加有关刷新时间的示例滑块工具提示信息吗？谢谢，伙计，您真的帮助了我！：）