Question

IQueriable功能不会延迟我创建的简单动画的开始。

setTimeout

var counter = document.getElementById("counter");	

  function countUp() {
	if(parseFloat(counter.innerHTML) < 100) {
  counter.innerHTML = parseFloat(counter.innerHTML) + 1;	   
     }
	}

setTimeout(countUp, 3000);
var counterId = setInterval(countUp, 125);

Answer 1

不确定您的期望-您将countUp设置为在三秒后运行，然后立即告诉它每125毫秒运行一次。

如果要让它延迟启动三秒钟，请给setTimeout一个大致设置间隔的函数：

setTimeout(function () {
  setInterval(countUp, 125);
}, 3000);

Answer 2

setTimeout不会阻止。它所做的只是设置一个超时，然后在超时到期后调用一次函数。这意味着超时和间隔都将在页面加载后立即调用。我只需设置一次超时，然后在函数中调用它

var counter = document.getElementById("counter");

function countUp() {
  if (parseFloat(counter.innerHTML) < 100) {
    counter.innerHTML = parseFloat(counter.innerHTML) + 1;
    setTimeout(countUp, 125);
  }
}

setTimeout(countUp, 3000);

<span id="counter">0</span>

这也将阻止您的间隔运行到无穷大-您只是不会注意到它，因为一旦innerHTML达到100，就不会再对其进行任何更改-该函数仍将每125毫秒调用一次

Answer 3

您应该查看诸如运行完成和事件循环的操作之类的概念。

代码构造错误。

setTimeout（如果已执行），但是首先我们看到setInterval执行，它会更改span标记中包含的值。

SetTimeout函数参数放置在队列中，并在3秒钟后达到增量，但是由于计数器更新的速度，您无法看到其效果或执行情况。

我修改了代码以显示SetTimeout的效果。

请注意，Javascript只有一个执行线程，如果执行被阻止，浏览器也将被阻止。

阻止执行的一种坏方法是使用while循环，直到计数器经过3秒为止。
取消注释错误方式代码以查看它。
SetTimeout in action

var counter = document.getElementById("counter");   

  function countUp() {
    if(parseFloat(counter.innerHTML) < 100) {
  counter.innerHTML = parseFloat(counter.innerHTML) + 1;       
     }
    }

  function countUpZero() {          
  //to see SetTimeout function param in execution
    if(parseFloat(counter.innerHTML) < 100) {
  counter.innerHTML = parseFloat(counter.innerHTML) + 1000;    
     }
  //end
    }
    //bad way to get delay
    /*
    var timestamp  = Date.now()+3000;
    while (Date.now() < timestamp);
    */
    //end bad way

setTimeout(countUpZero, 3000);    

var counterId = setInterval(countUp, 125);

setTimeout在动画运行之前不起作用

3 个答案: