时间戳

首页 > 解决方案 > 为什么在间隔完成之前我的代码没有运行？

javascript - 为什么在间隔完成之前我的代码没有运行？

问题描述

在片段中，我希望在弹出之前将的颜色timer变为红色。alert

我以前写过$("#timer").css('color', 'red');，alert("Time Up!")所以从逻辑上讲，它应该在显示警报之前更改文本颜色，但在显示警报后它会更改颜色。

let time = 3;

$(function() {
  let interval = setInterval(function() {
    time--;
    
    if (time >= 0)
      document.getElementById("timer").innerHTML = time + "";
    else {
      $("#timer").css('color', 'red');
      clearInterval(interval);
      alert("Time Up!")
    }
  }, 1000);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 id="timer">3</h1>

标签： javascripthtmljquery

解决方案

问题是因为alert()阻止了 UI 更新，尽管您在之前调用css() 过 alert()，但在警报出现之前没有足够的时间更新 DOM，并且暂时阻止了任何进一步的渲染。

要解决此问题，请将alert()呼叫置于具有短暂延迟的超时状态。这允许在显示之前更新 UI alert()：

let time = 3;

jQuery($ => {
  let interval = setInterval(function() {
    time--;
    
    if (time >= 0) {
      $("#timer").html(time);
    } else {
      $("#timer").css('color', 'red');
      clearInterval(interval);
      setTimeout(() => alert("Time Up!"), 0);
    }
  }, 1000);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 id="timer">3</h1>

推荐阅读