setTimeout与setInterval详解

window.setTimeout(“Fun”, time);

• 超时调用：在指定时间后执行函数内的代码
• 接收两个参数：函数体或者字符串（不建议使用字符串）、指定时间（毫秒为单位）
• 在指定时间后只执行一次，如果需要重复执行需要在函数体内再调用一次setTimeout

<!--文本框内的数字每过1秒加1-->
<input type="text" id="txt" value="0"> 

var txt = document.getElementById("txt");
function loop(){
	var num = Number(txt.value);
	txt.value = num + 1;
	setTimeout(loop, 1000);     // 函数体内调用一次函数，实现不断循环
}
loop();

• clearTimeout()— 取消设定的超时调用，上面的示例会使数值一直增加，除非刷新网页或者关闭浏览器，使用clearTimeout让在指定数值时停止增加

  • 需要一个timeID，这个ID相当于一个代号，通过这个代号指定也通过它来取消
  • 设定条件使setTimeout停止

  	var txt = document.getElementById("txt");
  	var stopLoop;                  // 声明变量，用来存储超时调用
  	function loop(){
  	   var num = Number(txt.value);
  	   txt.value = num + 1;
  	   stopLoop = setTimeout(loop, 1000);
  	   if(txt.value > 10){
  	      clearTimeout(stopLoop);   // 通过该变量取消调用
  	   }
  	}
  	loop();
  

  • 设定条件使setTimeout停止（进阶练习）：点击【停止】按钮数值停止更新，点击【继续】按钮数值继续更新

  <input id="txt" type="text" value="0">
  <input id="btnStop" type="button" value="停止">
  <input id="btnStart" type="button" value="继续">
  

  	var txt = document.getElementById("txt");
  	var btnStop = document.getElementById("btnStop");
  	var btnStart = document.getElementById("btnStart");
  	var stop;
  
  	btnStop.onclick = function(){
  		clearTimeout(stop);
  	}
  
  	btnStart.onclick = function(){
  		start();
  	}
  
  	function start(){
  		var num = Number(txt.value);
  		txt.value = num + 1;
  		stop = setTimeout(start, 1000);
  	}
  	setTimeout(start, 1000);
  

  • 如果此时连续点击【继续】，数值会加速更新，相当于每点击一次就提前一次调用，为了避免用户的一些不必要操作，做如下更改，将停止和继续各设置一个节点或两个数字（0，1），通过节点来判断如何执行
  • 初始化变量index，浏览器一打开数值在持续更新，这时的index=1，当点击停止，index=0；这时来做一个判断，当index=0时，继续函数才会执行，而用户如果一直点击继续，相当于index始终为1，函数不执行

  	var txt = document.getElementById("txt");
  	var btnStop = document.getElementById("btnStop");
  	var btnStart = document.getElementById("btnStart");
  	var stop;
  	var index = 0;
  
  	btnStop.onclick = function(){
  		index = 0;
  		clearTimeout(stop);
  		console.log(index);
  	}
  
  	btnStart.onclick = function(){
  		indexNum();
  		console.log(index);
  	}
  
  	function start(){
  		var num = Number(txt.value);
  		txt.value = num + 1;
  		index = 1;
  		stop = setTimeout(start, 1000);
  	}
  	setTimeout(start, 1000);
  
  	function indexNum(){
  		if(index == 0){
  			start();
  		}
  	}
  

window.setInterval(“Fun”, time);

• 间歇调用：每隔一次设定时间就执行一次函数

• 接收两个参数：函数体或者字符串（不建议使用字符串）、指定时间（毫秒为单位）

• 无需像setTimeout那样在函数体内再自身调用一次才能达到循环效果，setInterval本身就具有重复性，在末尾调用一次就可循环

• 用setInterval再实现一次上诉的数值持续更新

  var txt = document.getElementById("txt");
  function start(){
  		var num = Number(txt.value);
  		txt.value = num + 1;
  	}
  stop = setInterval(start, 1000);   // 在末尾调用一次即可
  

• 同样可停止的间歇调用，与超时调用一样，需要一个调用ID，方便取消

  	var txt = document.getElementById("txt");
  	var btnStop = document.getElementById("btnStop");
  	var btnStart = document.getElementById("btnStart");
  	var stop;
  	var index = 0;
  
  	function indexNum(){
  		if(index == 0){
  			start();
  		}
  	}
  
  	function start(){
  		var num = Number(txt.value);
  		txt.value = num + 1;
  		index = 1;
  	}
  
  	btnStop.onclick = function(){
  		index = 0;
  		clearInterval(stop);
  	}	
  
  	btnStop.onclick = function(){
  		indexNum();
  	}	
  
  	stop = setInterval(start, 1000);
  

在实际开发中，经常使用 setTimeout 来模拟 setInterval ，因为同时存在几个间歇调用，那么后面的可能在前面的未执行完成就启动，但超时调用可以完全避免这一情况