vue.js怎么setInterval定时调用方法

Posted 2023-05-11

如图所示：

补充：

1、Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

2、Vue.js(读音 /vjuː/, 类似于view)是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

3、Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

4、Vue.js 自身不是一个全能框架--它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时，Vue.js 也能完美地驱动复杂的单页应用。

参考技术A 无论是window.setTimeout还是window.setInterval，在使用函数名作为调用句柄时都不能带参数，而在许多场合必须要带参数，这就需要想方法解决。经网上查询后整理如下： 例如对于函数hello(_name)，它用于针对用户名显示欢 迎信息本回答被提问者采纳 参考技术B 把定时器的第一个参数（这是一个函数）定义在外面

JavaScript 定时器

简单介绍

在JavaScript中定时器有两个 setInterval() 与 setTimeout() 分别还有取消定时器的方法。
这都是window的对象，调用时可以省略window。这两个方法并不在 JavaScript 的规范中。
定时器方法相关方法有四种。

方法	描述
setInterval	周期性地调用一个函数(function)或者执行一段代码。
clearInterval	取消掉用setInterval设置的重复执行动作。
setTimeout	在指定的延迟时间之后调用一个函数或者执行一个代码片段。
clearTimeout	方法可取消由 setTimeout() 方法设置的 timeout。

setTimeout() 与setInterval()的区别是它们的执行次数不同。

⚠️setTimeout() 只执行一次setInterval()是每间隔给定的时间周期性执行。

setInterval

描述

setInterval() 方法可以按照制定的周期，来重复调用一个函数或执行一个代码段。周期单位为毫秒。
setInterval() 方法如果没有被 clearInterval() 方法关闭或页面关闭，那么会一直调用下去。
setInterval的参数有多个。
第一种，如果第一个参数为代码段，那么setInterval()方法可以选填。
第二种，如果第一个参数为函数，那么setInterval()方法可以有多个参数。

let timerId = setInterval(func|code, delay, arg1, arg2, ...)

参数

参数	必/选填	描述
func | code	必填	调用的函数后要执行的函数或代码字符串
delay	必填	执行代码前所需的时间，单位为毫秒，可以不填，默认值是 0
arg1，arg2…	选填	要传入被执行函数（或代码字符串）的参数列表（IE9 以下不支持）

⚠️ 参数func|code 一般传入的都是函数。由于某些历史原因，支持传入代码字符串，但是不建议这样做。

返回值

返回值timeoutID是一个正整数，表示定时器的编号。这个值可以传递给clearTimeout()来取消该定时器。

用法

这是一个点击按钮，每隔一秒种，数字加一的示例；

<p id="showNum"></p>
<button onclick="timer()">点我每秒钟数字加一</button>

<script>
  const showNum = document.getElementById("showNum");

  let timerId; // 计时器的ID
  let num = 0;

  function timer() {
    timerId = setInterval(addNum, 1000);
  }

  function addNum() {
    showNum.innerText = `${num++}`;
  }

  // 没有写停止计时器代码
</script>

setTimeout

描述

setTimeout()返回一个整数，表示定时器的编号，以后可以用来取消这个定时器。
setTimeout()允许我们将函数推迟到一段时间间隔之后再执行。

let timerId = setTimeout(func|code, delay, arg1, arg2, ...)

参数

setTimeout()参数这里和setInterval()的参数是一样的。

参数	必/选填	描述
func | code	必填	调用的函数后要执行的函数或代码字符串
delay	必填	执行代码前所需的时间，单位为毫秒，可以不填，默认值是 0
arg1，arg2…	选填	要传入被执行函数（或代码字符串）的参数列表（IE9 以下不支持）

⚠️参数func|code 一般传入的都是函数。由于某些历史原因，支持传入代码字符串，但是不建议这样做。

用法:

setTimeout()用法和 setInterval()是一样的，
不过 setTimeout() 只执行一次不同，setInterval() 是根据指定的时间周期性执行。

<p id="showNum"></p>
<button onclick="timer()">点击后，等待一秒钟数字加一</button>

<script>
  const showNum = document.getElementById("showNum");

  let timerId;
  let num = 0;
  addNum();

  function timer() {
    timerId = setTimeout(addNum, 1000);
  }

  function addNum() {
    showNum.innerText = `${num++}`;
  }

</script>

取消timer

clearInterval() 方法可取消由 setInterval() 设置的 timer。
clearTimeout() 方法可取消由 setTimeout() 设置的 timer。

使用方法很简单,只有一个参数，该参数timeoutID为您要取消定时器的标识符。
该ID由相应的setTimeout()或clearTimeout()调用返回.

clearInterval(intervalID);
clearTimeout(timeoutID);

用法很简单

function timer() {
  timerId = setTimeout(addNum, 1000);
}

clearTimeout(timerId); // 当代码运行到这行的时候，会取消timer所设置的定时器。

在控制台使用定时器

在浏览器控制台中也可以使用定时器

console.time(timerName)

创建一个名为name的计时器，并开始计时。

console.timeEnd(timerName)

调用console.timeEnd(name)停止计时器并输出所耗时间（毫秒）。

console.time(timerName);
console.timeEnd(timerName);

用法

for循环99999次要多少时间示例.

console.time(name);

let num;
for (let index = 0; index < 99999; index++) {
  num++;
}

console.timeEnd(name);