利用setInterval和setTimeout完成定时器操作

setInterval和setTimeout是JS中很常用的定时器函数，今天我们来看一下如何使用它们完成各种实用的定时器操作。

一、通过setInterval定时刷新数据

使用setInterval可以在规定的时间间隔内重复执行某个函数，我们可以利用这个特性去定时刷新数据。比如，我们有一个在线游戏页面，需要每5秒钟更新一次游戏得分：

```javascript functionrefreshScore(){ //这里是更新游戏得分的代码 } setInterval(refreshScore,5000); ```

上面的代码每隔5秒钟就会执行一次refreshScore()函数，完成游戏得分的更新。

二、通过setTimeout控制动画效果

setTimeout可以让某个函数在指定的时间后执行一次，我们可以利用它去控制动画效果。比如，我们有一个网站的导航栏，用户点击某个按钮后，导航栏展开并逐渐变为可见状态，这个动画效果可以通过下面的代码实现：

```javascript functionshowNavbar(){ //这里是展开导航栏的代码 } functionsetOpacity(){ varnavbar=document.getElementById(\"navbar\"); varcurrentOpacity=Number(window.getComputedStyle(navbar,null).getPropertyValue(\"opacity\")); if(currentOpacity<1){ varnewOpacity=currentOpacity+0.1; navbar.style.opacity=newOpacity; setTimeout(setOpacity,50); } } showNavbar(); setTimeout(setOpacity,500); ```

上面的代码中，showNavbar()函数展开导航栏，setOpacity()函数控制导航栏逐渐变为可见状态。具体实现是，在showNavbar()函数执行完后，setTimeout()函数延迟500ms执行setOpacity()函数，setOpacity()函数中，我们先获取导航栏当前的opacity值，然后每50ms将opacity值加0.1，直到导航栏完全可见为止。

三、同时使用setInterval和setTimeout实现复杂操作

setInterval和setTimeout的组合使用可以实现更为复杂的定时器操作。比如，我们有一个轮播图，需要每5秒钟切换一张图片。切换图片时，我们需要让当前的图片消失并将下一张图片显示出来，这个操作可以使用下面的代码实现：

```javascript varcurrentIndex=0; varimages=[\"img1.jpg\",\"img2.jpg\",\"img3.jpg\"]; functionswitchImage(){ varcurrentImage=document.getElementById(\"img-\"+currentIndex); currentImage.style.display=\"none\"; currentIndex++; if(currentIndex>=images.length){ currentIndex=0; } varnextImage=document.getElementById(\"img-\"+currentIndex); nextImage.style.display=\"block\"; } setInterval(switchImage,5000); ```

上面的代码中，我们定义了一个currentIndex变量和一个images数组，currentIndex变量表示当前显示的图片的下标，images数组中保存了所有图片的路径。switchImage()函数用来切换图片，它先将当前图片设置为不可见，然后将currentIndex加1，如果currentIndex超过了images的长度，就将currentIndex重设为0。最后，获取下一张图片的DOM元素并显示出来。整个操作会在每5秒钟内重复执行。

通过setInterval和setTimeout的灵活使用，我们可以完成各种各样实用的定时器操作。相信在实际开发中，这些技巧一定会给我们带来很多便利。