JS中常用计时器的用法

881 阅读1分钟

文章已同步至【个人博客】,欢迎访问😃
文章地址:blog.fanjunyang.zone/archives/js…

  • setTimeout():在指定的毫秒数后调用函数或者计算表达式
  • setInterval():按照指定的周期(以毫秒计)来调用函数或计算表达式。方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。
  • clearTimeout():清除setTimeout()的定时器对象
  • clearInterval():清除setInterval()的定时器对象

注:这里的定时时间单位都为毫秒

setTimeout()

语法

setTimeout(code,millisec,lang)

  • code:必需,要调用的函数后要执行的 JavaScript 代码串。
  • millisec:必需,在执行代码前需等待的毫秒数。
  • lang:可选,脚本语言可以是:JScript | VBScript | JavaScript

示例:

<p>点击按钮,在等待 3 秒后弹出 "Hello"。</p>
<button onclick="myFunction()">点我</button>

<script>
function myFunction() {
  setTimeout(function() {
    alert("Hello");
  }, 3000);
}
</script>

如上代码,当你点击了 “点我” 这个按钮,那么会在3秒后在窗口弹出 "Hello"

setInterval()

语法

setInterval(code,millisec,lang)

  • code:必需,要调用的函数或要执行的代码串。
  • millisec:必需,周期性执行或调用 code 之间的时间间隔,以毫秒计。
  • lang:可选,JScript | VBScript | JavaScript

示例:

<input type="text" id="clock" />
<script type="text/javascript">
var int = self.setInterval("clock()", 1000);
function clock() {
  var d = new Date();
  var t = d.toLocaleTimeString();
  document.getElementById("clock").value = t;
}
</script>

<button onclick="int=window.clearInterval(int)">停止</button>

以上代码,就是每过1秒执行一次clock()函数,无限执行,只有当点停止的时候才会停止

clearTimeout() 与 clearInterval()

这两个方法用法一样,就是清除定时器对象,如上面示例中的 "停止" 按钮,从名字就可以知道清除的定时器与上面是对应的

这两个方法的参数都是只有一个参数,即你要清除的定时器对象


^_<