javascript 带有 slideStop 事件的 Bootstrap 滑块
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23937919/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap slider with slideStop event
提问by Driver
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.
我的页面上有一个引导滑块。我不知道如何更改此代码，在拖动滑块时 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>
采纳答案by Rob Schmuecker
OK I'm gonna give this a try. I guess you are using the bootstrap slider plugin/add-on https://github.com/seiyria/bootstrap-slideror a similar fork.
好的，我要试试这个。我猜您正在使用引导滑块插件/附加组件 https://github.com/seiyria/bootstrap-slider或类似的分支。
So what you would want to do is to firstly cancel the setTimeouton slideStartand 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.
所以你想要做的是首先取消setTimeoutonslideStart并恢复它 on slideStop。但是，如果 ajax 请求在滑块移动之前启动并在拖动期间返回，您也不希望更新 div 的内容。
The code would go a little like this:
代码有点像这样：
Javascript:
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);
});
