一、setinterval 的基本介绍
setinterval 是 JavaScript 中一个周期性调用函数的方法,用来间隔一定时间重复执行某个函数。
setinterval 有两个参数:第一个参数是要执行的代码,第二个参数是间隔时间,间隔时间的单位是毫秒。
setinterval 的调用,会返回一个 ID 值,这个 ID 值可以用来在需要的时候停止 setinterval 的周期性调用。
二、setinterval 的停止方法
setinterval 的停止有两种方式:一种是使用 clearInterval 函数,另一种是使用 clearTimeout 函数。
clearInterval 的参数是 setinterval 调用后返回的 ID 值,调用 clearInterval 函数后,就可以停止 setinterval 的周期性调用。
var intervalId = setInterval(function(){ // 需要周期性执行的代码 }, 1000); clearInterval(intervalId);
使用 clearTimeout 函数也可以停止 setinterval 的周期性调用,但是需要注意的是,clearTimeout 函数的参数必须是 setTimeout 函数调用后返回的 ID 值,如果 clearTimeout 函数的参数是 setInterval 函数调用返回的 ID 值,则无法起到停止 setinterval 的作用。
三、使用 setinterval 前的注意事项
在使用 setinterval 的时候,需要注意以下几点:
1、setinterval 的执行时间可能会受到代码运行效率的影响,如果要保证执行时间的准确性,可以使用 setTimeout 以时间控制的方式来周期性执行。
function intervalFunction(){ // 需要周期性执行的代码 setTimeout(intervalFunction, 1000); } intervalFunction();
2、setinterval 执行的时间间隔应该尽量大于函数的执行时间,否则多个函数可能会同时执行,导致代码执行效率低下。
3、setinterval 应该只在需要周期性执行某些代码的时候使用,如果只需要执行一次,可以使用 setTimeout。
四、实例演示
下面是一个使用 setinterval 和 clearInterval 实现图片轮播的例子。
// HTML 代码 <div id="imgContainer"> <img src="img1.jpg" class="current"> <img src="img2.jpg"> <img src="img3.jpg"> </div> // CSS 代码 #imgContainer { width: 500px; height: 300px; position: relative; } #imgContainer img { position: absolute; top: 0; left: 0; } #imgContainer img.current { z-index: 1; opacity: 1; } #imgContainer img.next { z-index: 0; opacity: 0; } // JavaScript 代码 var currentImgIndex = 0; var intervalId = setInterval(function(){ var imgArray = document.getElementsByTagName('img'); // 隐藏当前图片 imgArray[currentImgIndex].className = ''; // 显示下一张图片 currentImgIndex = (currentImgIndex + 1) % imgArray.length; imgArray[currentImgIndex].className = 'current next'; // 动态改变图片透明度,实现渐变效果 var opacity = 0; var fadeInId = setInterval(function(){ opacity += 0.1; imgArray[currentImgIndex].style.opacity = opacity.toFixed(1); imgArray[(currentImgIndex + imgArray.length - 1) % imgArray.length].style.opacity = (1 - opacity).toFixed(1); if(opacity >= 1){ clearInterval(fadeInId); } }, 50); }, 5000); var stopBtn = document.getElementById('stopBtn'); stopBtn.onclick = function(){ clearInterval(intervalId); }
点击下面的按钮可以停止 setinterval 的周期性调用。