JavaScript 定时器

作者: 前小小 | 来源:发表于2021-04-28 16:58 被阅读0次

前言

什么是定时器?JS提供了一些原生方法来实现延时去执行某一段代码。下面来简单介绍一下 setTimeout,setInterval 定时器。

setTimeout

用于在一段时间后仅执行一次函数或指定的代码段。

语法

window.setTimeout(function, milliseconds)
  • 第一个参数是要执行的函数。
  • 第二个参数指示执行前的毫秒数(1秒= 1000毫秒)。

示例:单击按钮2秒钟后将显示提示消息

<!DOCTYPE html>
<html>
<title></title>
<body>

<p>等待2秒后,点击第一个按钮,提示"Hello world"。</p>
<p>点击第二个按钮,防止第一个函数执行。(必须在2秒之前点击)</p>
<button onclick="myFunc()">点击</button>
<button onclick="myStopFunc()">停止alert</button>

<script>
var t;

function myFunc() {
  t = setTimeout(function(){ alert("Hello world"); }, 2000);
}

function myStopFunc() {
  clearTimeout(t);
}
</script>

</body>
</html>

停止执行
clearTimeout() 方法停止执行setTimeout()中指定的函数。

window.clearTimeout(var)

clearTimeout() 方法使用从setTimeout()返回的变量。

t = setTimeout();

clearTimeout(t);

如果尚未执行该函数,则可以通过调用clearTimeout() 方法来停止执行。

setInterval

按照指定的周期(以毫秒计)来调用函数或计算表达式。方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。

语法:

window.setInterval(function, milliseconds)
  • 第一个参数是我们要执行的函数
  • 第二个参数指示每次执行之间的时间间隔的长度。

示例:每秒执行一次称为“ startTimer”的功能

<!DOCTYPE html>
<html>
<title></title>
<head>

<style>
#result {
   display: flex;
   justify-content: center;
   color: #ec181e;
   font-size: 25vw;
   font-weight: 900;
   text-shadow: 0 6px 4px rgba(255, 100, 100, 0.6);
}
</style>
</head>
<body>

<div id="result">00:00:00</div>
<button onclick="stopTimer()">停止时间</button>

<script>
// 每1秒执行一次startTimer()
var t = setInterval(startTimer, 1000);

function startTimer() {
  var date = new Date();
  document.getElementById("result").innerHTML = date.toLocaleTimeString();
}

// 取消使用setInterval()创建的重复动作
function stopTimer() {
   clearInterval(t);
}
</script>

</body>
</html>

停止执行
clearInterval() 方法停止执行 setInterval() 中指定的函数。

window.clearInterval(var)

clearInterval() 方法使用从setInterval()返回的变量。

t = setInterval();

clearInterval(t);

区别:

  • setTimeout 允许设置一个超时对象,超时后执行这个对象,但是只执行一次,无周期。
  • setInternval 允许设置一个超时对象,超时后执行这个对象,周期等于超时对象指定的时间,周期为无限循环。

相关文章

  • js字符串,定时器

    Javascript组成 字符串处理方法: 定时器在javascript中的作用: 定时器: setTimeout...

  • JavaScript

    javascript引入方式 定时器

  • 「DOM 编程」JavaScript 动画

    JavaScript 动画实现方式JavaScript 动画三要素定时器常见动画动画函数 JavaScript 动...

  • 驯服定时器和线程

    定时器并不属于JavaScript 虽然我们一直在JavaScript中使用定时器,但是它并不是javascrip...

  • 定时器 类型转换 封闭函数

    定时器定时器在javascript中的作用1、制作动画2、异步操作3、函数缓冲与节流 定时器类型及语法 /*定时器...

  • 定时器

    定时器定时器在javascript中的作用1、制作动画2、异步操作3、函数缓冲与节流定时器类型及语法/*定时器:s...

  • Web26.闭包&定时器&BOM

    定时器 JavaScript提供执行代码的功能,叫做定时器(timer),主要由setTimeout()和setI...

  • 定时器

    定时器 JavaScript提供定时执行代码的功能,叫做定时器,主要由setTimeout()和setInterv...

  • 2018-07-09

    定时器在javascript中的作用 1、制作动画 2、异步操作 3、函数缓冲与节流 定时器类型及语法 定时器: ...

  • 定时器

    定时器 定时器在javascript中的作用 1、制作动画 2、异步操作 3、函数缓冲与节流 定时器类型及语法 /...

网友评论

    本文标题:JavaScript 定时器

    本文链接:https://www.haomeiwen.com/subject/qvevrltx.html