setTimeout 和 setInterval-概述 / 简单实例 / 进阶

概述与区别

setTimeout 和 setInterval 都是时间相关的操做。

区别：

• setTimeout，延时，操做1次；
• setInterval ：每隔指定的时间就执行一次表达式

简单实例初探

setTimeout实例：

延缓1秒后提示（仅执行1次）

function my_alert(){
  	alert("延缓1秒后执行提示")
}
setTimeout('my_alert()',1000); //延缓1秒后执行提示


	//模态窗遮罩背景
	function get_modalbg_height(){
	  	var this_screen_width= $(window).width();
		var this_mainImg_height= $(".main-img > img").height();
		
		
		var modal_bg = $(".modal-bg");
		modal_bg.css({
			width:this_screen_width,
			height:this_mainImg_height
		});
	}
	setTimeout('get_modalbg_height()',100); //延缓1秒后执行提示

setInterval实例：
间隔3秒，持续弹出（重复执行）

function my_alert2(){
  alert("Hi！");
}
setInterval(function(){ my_alert2();},  3000);  //间隔3秒持续弹出

 

进阶实例

功能：使用setInterval ， 页面间隔3秒，切换背景色

js以下：

var myVar = setInterval(function(){ setColor() }, 300);

function setColor() {
    var x = document.body;
    x.style.backgroundColor = x.style.backgroundColor == "yellow" ? "pink" : "yellow";
}

function stopColor() {
	clearInterval(myVar);
}

html以下：

<button onclick="stopColor()">中止切换</button>

 

功能：使用setTimeout，间隔1秒，切换背景图

js以下：

function change(n){
    if(n>3) n=1;  // 一共5张图片，因此循环替换
    document.getElementById("myimg").setAttribute("src", n+".jpg");
    n++;
    setTimeout("change("+n+")",1000);
}
window.onload = function(){
    setTimeout("change(1)", 1000);
}

html以下：

<img src="1.jpg" id="myimg">