IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> setInterval 定时任务注意事项 -> 正文阅读

[JavaScript知识库]setInterval 定时任务注意事项

使用场景

**在 大量setInterval使用或者大量页面轮询或者指定定时任务时,把握不了 setInterval 里面的细微时差就很容易导致 setInterval 导出跳,,根本使用 clearInterval 停止不完当前时间setInterva **

在前端做定时任务时,有二种方案可以选择
第一种是使用原生JS 提供的 setInterval 或者 setTimeout
第二种是使用第三方库 cron

本文章主要讲的使用 setInterval 来做定时任务

封装setInterval函数

  /**
   * 倒计时 函数
   * @param item 倒计时时间
   * @param running 正在倒计时中得会执行得函数
   * @param finish 倒计时结束执行得函数
   */
  const countDown =(item = 60, running, finish) =>{
    let stop = setInterval(() => {
      if (item <= 0)
      {
        clearInterval(stop);
        finish instanceof Function && finish(stop, item--);
      } else
      {
        running instanceof Function && running(stop, item--);
      };
    }, 1000);
  }

clearInterval (MDN)

Window 和 Worker 接口提供的 setInterval() 方法重复调用一个函数或执行一个代码片段,在每次调用之间具有固定的时间间隔

var intervalID = setInterval(func, [delay, arg1, arg2, ...]);
var intervalID = setInterval(function[, delay]);
var intervalID = setInterval(code, [delay]);

参数

func
要重复调用的函数,每经过指定 delay 毫秒后执行一次。第一次调用发生在 delay 毫秒之后。

code
这个语法是可选的,你可以传递一个字符串来代替一个函数对象,你传递的字符串会被编译然后每经过 delay 毫秒执行一次。这个语法因为与 eval() 存在相同的安全风险所以不推荐使用。

delay
是每次延迟的毫秒数(一秒等于 1000 毫秒),函数的每次调用会在该延迟之后发生。如果未指定,则其默认值为 0

arg1, …, argN 可选
当定时器过期的时候,将被传递给 func 函数的附加参数。

返回值
返回值 intervalID 是一个非零数值,用来标识通过 setInterval() 创建的定时器,这个值可以用来作为 clearInterval() 的参数来清除对应的定时器。

问题场景

如。当前页面有5个地方使用 countDown 该函数,触发时间和时机都不一样,要求,在下一个使用时,停止上一个定时任务,执行当前的定时任务,当大量点击某一个定时任务时,此时要去清除 上个任务,这个就会出问题
注意
细微时差
细微时差
细微时差
延迟之后发生,是每次延迟的毫秒数(一秒等于 1000 毫秒)在触发的
延迟之后发生,是每次延迟的毫秒数(一秒等于 1000 毫秒)在触发的
延迟之后发生,是每次延迟的毫秒数(一秒等于 1000 毫秒)在触发的

解决封装后 setInterval 不受控制方案1

因为 setInterval 是1s 执行一次,所有这里必须要延迟1s (在 countDown 函数 中的回调也是1s后才会执行和返回 intervalID )

解决封装后 setInterval 不受控制方案2 (不管是大鱼虾米一起抓)

在封装函数时,每一次调用 countDown 函数时就把setInterval 他返回intervalID push 到数组里面,每一次清除都循环 push的数据 clearInterval

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-05-06 10:58:49  更:2022-05-06 11:00:12 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/23 22:58:05-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码