Jquery滑块更改刷新脚本的间隔

Jquery slider to change interval on refresh script

本文关键字：脚本 刷新 Jquery      更新时间：2023-09-26

我使用这段代码每隔X秒刷新我的div:

     <script>
 $(document).ready(function() {
  $("#container").load("stats.php");
   var refreshId = setInterval(function() {
      $("#container").load('stats.php');
   }, 10*1000);
   $.ajaxSetup({ cache: false });
});
</script>

这工作得很好，我唯一想添加的是一个滑块像这样:http://jqueryui.com/demos/slider/#steps

我希望它能够设置刷新定时器的间隔，默认为10秒(10*1000)

是否可以让滑块修改值?如果有，我该怎么做呢?

谢谢!

你的脚本应该是这样的:

 $(document).ready(function() {
     var intSeconds = 10;
     var refreshId;

     function sTimeout()
     {
          // Load content
          $("#container").load("stats.php");
          // Saving the timeout
          refreshId = setTimeout(function() {
             sTimout();
         }, intSeconds *1000);
     }
     sTimeout();
     $.ajaxSetup({ cache: false });
     // The slider
     $(".ui-slider").slider({
         min : 1, // minimum value
         max : 20, // Maximum value
         value : intSeconds, // Copy current  value
         change: function(event, ui) {
             clearTimeout(refreshId); // clear it
             intSeconds = ui.value; // Update value
             sTimeout();  // Restart it
         }
     });
});

现在只需添加一个滑块DIV到您的源代码，并检查它。

像这样添加滑块:

var interval = 10000;
$( "#slider" ).slider({
  value:10,
  min: 1,
  max: 20,
  step: 1,
  slide: function( event, ui ) {
    interval = ui.value * 1000;
  }
});

那么你可以使用setTimeout:

而不是setInterval
(function reload () {
      $("#container").load('stats.php');
      setTimeout(reload(), interval);
   })();
相关文章：