javascript - 需要根据 jquery 中的选择框值每 X 秒刷新一次页面

Question

代码:

<script>
   var interval =0;
   var auto_refresh= 0;
   $(document).ready(function() {
       alert("hi");
       $('#reload_interval').change(function() {
           var reload   = $(this).val();
           interval = reload * 1000;
           if(reload !='') {
               auto_refresh = setInterval(function() {
                   alert(interval);
                   console.log(interval);               
               }, interval);
           }else {
               clearInterval ( auto_refresh );
           }
       });
   });
</script>
<select id="reload_interval" name="reload_interval">
    <option value="">Reload Interval</option>
    <option value="30">30 Secs</option>
    <option value="45">45 Secs</option>
    <option value="60">60 Secs</option>
</select>

一开始，一切都很好。之后，如果我选择 60 秒或 45 秒，它会在达到 45 秒或 60 秒之前加载....

哪里出了问题？

Answer 1

在设置新的间隔之前需要清除之前的间隔

var interval = 0;
var auto_refresh = 0;
$(document).ready(function() {
  $('#reload_interval').change(function() {
    var reload = $(this).val();
    interval = reload * 1000;
    if (auto_refresh) {
      clearInterval(auto_refresh); //clear the previous interval before setting a new one
    }
    if (reload) {
      auto_refresh = setInterval(function() {
        snippet.log(interval);
      }, interval);
    }

  });
});

<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="reload_interval">
  <option></option>
  <option>1</option>
  <option>2</option>
  <option>4</option>
  <option>6</option>
</select>

在您的代码中，当您选择第二个值时，前一个间隔仍在运行，因此您将在第二次更改值后执行 2 个间隔，同样在第三次更改值后执行 3 个间隔。