javascript两种计时器

JavaScript两种计时器介绍

在网页开发中，经常需要利用计时器实现一些动态操作，比如页面元素的动画效果、页面倒计时等等。JavaScript提供了两种计时器实现方式——setInterval和setTimeout。

setInterval是一种周期性计时器，在指定的时间间隔内重复执行同一个方法，比如下面这个例子是每隔1秒钟弹出一个窗口：

setInterval(function(){alert("这是一个周期性计时器");}, 1000);

setTimeout则是一种一次性计时器，只会执行一次指定的方法，比如下面这个例子是3秒钟之后弹出一个窗口：

setTimeout(function(){alert("这是一个一次性计时器");}, 3000);

两种计时器的差异就在于执行次数和时间间隔的不同。接下来分别对这两种计时器进行详细介绍。

setInterval计时器

setInterval需要传入两个参数——一个是要执行的函数，另一个是时间间隔，单位是毫秒。下面是一个在页面中周期性更改文本内容的例子：

window.onload = function(){var content = document.getElementById("content");var i = 0;setInterval(function(){i++;content.innerHTML = "计时器已执行"+i+"次";}, 1000);};

上面的代码中，我们首先找到content元素，然后定义一个计数器i，每执行一次计时器就让i自增一，再把i的值更新到content元素中。

值得注意的是，setInterval返回的是一个计时器ID，可以用来停止计时器的执行：

var timerID = setInterval(function(){alert("计时器执行中");}, 1000);//停止计时器clearInterval(timerID);

setTimeout计时器

setTimeout比较适合做一些延时操作，比如下面这个例子是在3秒钟后隐藏一个元素：

window.onload = function(){var element = document.getElementById("element");setTimeout(function(){element.style.display = "none";}, 3000);};

上面的代码中，我们首先找到需要 hide 的元素，然后用 setTimeout 实现延时操作。在 3 秒钟之后，将元素隐藏起来。

和setInterval一样，setTimeout也返回一个计时器ID，可以用来取消计时器的执行：

var timerID = setTimeout(function(){alert("计时器执行中");}, 1000);//取消计时器clearTimeout(timerID);

小结

在 JavaScript 中，我们可以使用 setInterval 和 setTimeout 两个函数来实现计时器效果。setInterval 是周期性计时器，可以重复执行一个方法，而 setTimeout 则是一次性计时器，只会执行一次指定的方法。两种计时器在应用中各有优缺点，需要根据实际情况进行选择。同时，我们需要根据应用需要合理使用计时器，避免出现性能问题。

上一篇：css怎样实现文字竖排

下一篇：css怎么选中name标签