Question

我每隔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）

是否可以让滑块修改值？如果是的话，我该怎么做？

谢谢！

Answer 1

您的脚本将是这样的：

 $(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，然后将其检出。

Answer 2

添加滑块如下：

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);
   })();

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

2 个答案: