一:定时调用setInterval
定时调用setInterval可以一直调用,延时调用setTimeout只调用一次
效果图:点击按钮后开始计数,每隔一秒调用一次,一直调用,可以用clearInterval清除定时调用
setInterval用法示例代码
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<script type="text/javascript">
window.onload=function(){
var start=document.getElementById("start");
var stop=document.getElementById("stop");
var h1=document.getElementById("h1");
var i=1;
var timer;
start.onclick=function(){
//调用定时函数,每1s调用一次
timer=setInterval(function(){
h1.innerHTML=i++
},1000)//1000毫秒=1秒
};
stop.onclick=function(){
//点击停止按钮清除定时调用
clearInterval(timer)
}
}
</script>
</head>
<body>
<button type="button" id="start">开始</button>
<button type="button" id="stop">停止</button>
<h1 id="h1">0</h1>
</body>
</html>
二:延时调用setTimeout
效果图:点击按钮,两秒后执行函数,弹出警告框!并且只调用一次 可以用clearTimeout清除延时调用
setTimeout用法示例代码
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<script type="text/javascript">
window.onload=function(){
var input=document.getElementById("input");
//绑定单击响应函数
input.onclick=function(){
//延时调用 两秒后执行
setTimeout(function(){
alert("加油~")
},2000)
}
}
</script>
</head>
<body>
<button type="button" id="input">弹出警告框!</button>
</body>
</html>