setTimeout函数是JS中的一个高级函数,可以实现代码的延时执行。
语法:
setTimeout(function, delay, param1, param2, ...)
使用示例:
// 延时1秒后,弹出“hello world”
setTimeout(function(){
alert("hello world");
}, 1000);
setInterval函数是JS中的一个高级函数,可以实现代码的循环定时执行。
语法:
setInterval(function, delay, param1, param2, ...)
使用示例:
// 每隔1秒弹出“hello world”
setInterval(function(){
alert("hello world");
}, 1000);
setTimeout和setInterval两个函数虽然都可以实现延时执行JS代码,但是它们在实现方式上有差别。
使用setTimeout或setInterval函数时,需要注意以下点:
function countDown(){
var countdownDom = document.getElementById('countdown');
var time = parseInt(countdownDom.innerHTML);
time -= 1;
if(time <= 0){
clearTimeout(timerId);
countdownDom.innerHTML = "倒计时结束";
}else {
countdownDom.innerHTML = time;
}
}
// 倒计时开始
var timerId = setInterval(countDown, 1000);
上述代码实现了一个简单的倒计时效果,每隔1秒钟更新一次倒计时数字,当倒计时结束后,停止执行,显示倒计时结束。
var square = document.getElementById('square');
var step = 1;
function animation(){
if(step < 100){
square.style.left = (step++) + "px";
setTimeout(animation, 10);
}
}
// 动画效果开始
animation();
上述代码实现了一个简单的动画效果,将一个div元素从左向右移动,每10毫秒移动一个像素,当移动到100像素后,停止执行。