setTimeout()与setInterval()

Posted 2020-08-23 Una

一、setTimeout与setInterval的用法（http://www.css88.com/archives/5804）

      setTimeout是超时调用，javascript是一个单线程的解析器，因此在一定时间内只能执行一段代码；setTimeout的第二个参数只是告诉javascript再过多久将当前任务添加到执行队列中，如果队列是空的，当前添加的代码就会立即执行；如果队列不是空的，就会等前面的代码执行完了之后再执行。（所以超时调用中的方法不一定就会在给定的超时时间到了之后立马执行，前面的代码有可能执行的时间超过这个给定的超时时间）

     超时调用每次调用只会执行一次，要想反复执行超时调用，setTimeout函数内部再添加setTimeout方法。

setTimeout ( function () {	
	var div = document.getElementById("div4");
	//var left = parseInt(div.style.left) + 5;
	var left = div.offsetLeft + 5;
	
	div.style.left = left + "px";
	if (left < 200) {
		setTimeout( arguments.callee, 50);
	}
	
}, 50);

     setInterval是间歇调用，调用一次一直执行，直到页面卸载。和setTimeout一样，指定的时间间隔表示的是何时将定时器的代码添加到队列中；setInterval确保了定时器代码规则的插入到队列中，但是，如果定时器代码之前的代码执行时间比定时器间隔要长，会出现如下情况：1、某些间隔可能会被跳过，2、多个定时器的代码执行之间的间隔可能会比预期的小。

var num = 0;
var max = 10;
var intervalId = null;

function incrementNumber () {
	num ++ ;
	
	if (num === max) {
		clearInterval (intervalId);
	}
}

intervalId = setInterval (incrementNumber, 500);

    所以一般用setTimeout方法来实现一个定时器（如第一个实例）。

var num = 0;
var max = 10;
//var intervalId = null;

function incrementNumber () {
	num ++ ;
	
	if (num < max) {
		 setTimeout (incrementNumber, 1000);
		 console.log("1");
	}
}

 setTimeout (incrementNumber,1000);