五、（JS）window中的定时器

news2024/11/24 11:58:41

一、为什么叫做window中的定时器

我们在全局中会用到一些函数，比如说alert函数，prompt函数，setTimeout等等

我们有在这里定义过这些函数吗？很明显没有。可见我们这些函数都是来自于window。

所以还可以写成window.setTimeout。这就能解释为什么叫做window中的定时器。

二、window中的定时器用途

平常我们定义一个函数，通过foo()调用的时候，这函数是不是会立即执行。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>


  <script>

    function foo() {
      console.log("-------foo------");
    }

    foo()
    

  </script>

</body>

</html>

但是有时候我们并不想立即执行一个函数，而是等待特定一段时间之后再执行，我们称之为“计划调用（scheduling a call）”。

三、setTimeout：允许我们将函数推迟到一段时间间隔以后再执行。

我们直接写代码，通过setTimeout需要传入2个参数，一个是函数的引用，一个是时间（毫秒）

，下面的例子就是计划3秒过后调用foo函数。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>


  <script>

    function foo() {
      console.log("-------foo------");
    }

    // foo()

    setTimeout(foo, 3000)


  </script>

</body>

</html>

四、setInterval：允许我们重复运行一个函数，从一段时间间隔之后开始运行，之后以该时间间隔连续重复运行该函数。

setTimeout(foo,3000)：三秒后执行一次foo函数（只会执行一次函数）

setInterval(bar,3000)：每过三秒执行一次bar函数（固定间隔时间重复调用函数）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>


  <script>

    // 1. setTimeout
    function foo() {
      console.log("-------foo被调用------");
    }

    // foo()
    setTimeout(foo, 3000)

    // 2. setInterval
    function bar() {
      console.log("--------bar被调用------");
    }

    setInterval(bar, 3000)

  </script>

</body>

</html>

五、取消对应的定时器方法

clearTimeout：取消setTimeout的定时器；
- setTimeout在调用时会返回一个“定时器标识符（time identifier）”，我们可以使用它来取消执行。
clearInterval：取消setInterval的定时器；

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <button class="out">取消setTimeout定时器</button>
  <button class="interval">取消setInterval定时器</button>


  <script>

    // 1. setTimeout
    function foo() {
      console.log("-------foo被调用------");
    }
    var timeoutID = setTimeout(foo, 3000)

    var timeoutBtn = document.querySelector(".out")
    timeoutBtn.onclick = function () {
      // 取消调度
      clearTimeout(timeoutID)
    }


    // 2. setInterval
    function bar() {
      console.log("--------bar被调用------");
    }

    var intervalID = setInterval(bar, 3000)
    var intervalBtn = document.querySelector(".interval")
    intervalBtn.onclick = function () {
      clearInterval(intervalID)
    }




  </script>

</body>

</html>

五、补充

5.1 定时器还能传入额外参数

我们可以在调用定时器的时候传入一些参数（"liudehua", 18,1.88），这个foo函数可以接受定时器传进来的参数。（不常用）

function foo(name,age,height) {
console.log("-------foo被调用------");
}
var timeoutID = setTimeout(foo, 3000, "liudehua", 18,1.88)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <button class="out">取消setTimeout定时器</button>
  <button class="interval">取消setInterval定时器</button>


  <script>

    // 1. setTimeout
    function foo(name,age,height) {
      console.log("-------foo被调用------");
    }
    var timeoutID = setTimeout(foo, 3000, "liudehua", 18,1.88)

    var timeoutBtn = document.querySelector(".out")
    timeoutBtn.onclick = function () {
      // 取消调度
      clearTimeout(timeoutID)
    }


    // 2. setInterval
    function bar() {
      console.log("--------bar被调用------");
    }

    var intervalID = setInterval(bar, 3000)
    var intervalBtn = document.querySelector(".interval")
    intervalBtn.onclick = function () {
      clearInterval(intervalID)
    }




  </script>

</body>

</html>