Question

我希望某个功能每10分钟运行一次，但我想提前10秒警告用户此事件。

所以我做了这个：

window.setInterval(function(){

    alert('Warning! Refresh in 10 seconds');

    window.setInterval(function(){

        applyfilter();
    }, 590000);

}, 600000);

然而，这不起作用。计时器不会保持“同步”。如何解决这个问题？

Answer 1

我认为您可以计算在一个间隔中经过10秒的时间，并决定何时应用过滤器或显示消息。喜欢，

var time_start = Date.now();
var warning_done = false;
var applied_filter = false;
window.setInterval(function(){
    if (warning_done === false && Date.now() - time_start > 10*60*1000 - 10*1000){
       alert('Warning! Refresh in 10 seconds');
       warning_done = true;
    } else if (applied_filter === false && Date.now() - time_start > 10*60*1000 ){
        applyfilter();
        applied_filter = true;
    }
}, 10*1000);

Answer 2

它比嵌套的setIntervals干净利落地复杂一点。怎么样？

var startTimer = function(){
  window.setTimeout(function(){
    applyfilter();
    startTimer();
  }, 600000);
  window.setTimeout(function(){
    alert('Warning! Refresh in 10 seconds');
  }, 590000);
};
startTimer(); //on doc load, etc

Answer 3

由于JavaScript是单线程的，因此一旦弹出警告框，计时器就会失去同步。

最好在元素中显示警告。然后，您可以使用setTimeout()，因此一次只能运行一个计时器。

为了演示目的，我已将延迟更改为6s和3s：

var output= document.getElementById('output');

function applyfilter() {
  output.textContent= 'Filter applied!';
  warning();
}

function warning() {
  setTimeout(function() {
    output.textContent= 'Warning!  Refresh in 3 seconds';
    setTimeout(function() {
      applyfilter();  
    }, 3000);
  }, 6000);
}
  
warning();

#output {
  background: yellow;
}

<div id="output"></div>

带有警告的Javascript SetInterval

3 个答案: