34、讲解JavaScript定时器的使用方法，包括setTimeout和setInterval函数的使用
第34课：JavaScript定时器
在前端开发中，常常需要对页面元素进行周期性的更新或动画展示，这时就需要使用JavaScript的定时器功能。
JavaScript定时器分为两种：setTimeout()和setInterval()，它们的功能是在指定的时间间隔内执行一段JavaScript代码。
-
setTimeout()
setTimeout()方法的作用是在指定的毫秒数后执行一次指定的JavaScript代码。
-
setInterval()
setInterval()方法的作用是每隔指定的毫秒数执行一次指定的JavaScript代码。
这两种定时器的使用方法基本相同，都有两个参数：要执行的JavaScript代码和定时器时间间隔（以毫秒为单位）。
在实际应用中，可利用定时器实现网页中一些有趣的动画效果，甚至可以制作一个简单的轮播图。以下是一个简单的例子：
<!DOCTYPE html>
<html>
<head>
<title>JavaScript定时器</title>
<style type="text/css">
#pic{width: 480px; height: 300px; background-color: #f2f2f2; position: relative;}
#pic img{width: 480px; height: 300px; position: absolute; top: 0; left: 0;display: none;}
#pic img:first-child{display: block;}
</style>
<script type="text/javascript">
var index = 0; //图片下标
var timer; //定时器
function play(){ //播放函数
timer = setInterval(function(){
var imgs = document.getElementsByTagName("img");
imgs[index].style.display = "none";
index++;
if(index == imgs.length){
index = 0;
}
imgs[index].style.display = "block";
},1000);
}
function stop(){ //停止函数
clearInterval(timer);
}
</script>
</head>
<body onload="play()" onunload="stop()">
<div id="pic">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
<img src="4.jpg">
</div>
</body>
</html>上面的代码中，通过计时器每隔1秒钟更换一张图片，实现轮播图效果。当鼠标移入网页时，自动播放效果停止，当鼠标移出网页时，自动播放效果继续。需要注意的是，当页面卸载时一定要清除定时器，否则会引起内存泄漏问题。
总之，在前端开发中，JavaScript定时器能给我们带来很多便捷和灵活的功能，如周期性的数据更新、动画效果制作、轮播图制作等等。
声明：本站原创文章文字版权归本站所有，转载务必注明作者和出处；本站转载文章仅仅代表原作者观点，不代表本站立场，图文版权归原作者所有。如有侵权，请联系我们删除。