粥里有勺糖

vuePress-theme-reco 粥里有勺糖    2018 - 2023
粥里有勺糖 粥里有勺糖

Choose mode

  • dark
  • auto
  • light
关于我
备战春秋
  • 心得总结
  • 校招考点汇总
  • 面经汇总
  • 复习自查
技术笔记
  • 技术教程
  • 模板工程
  • 源码学习
  • 技术概念
  • 个人作品
  • 学习笔记
计算机基础
  • 算法与数据结构
  • 操作系统
  • 计算机网络
  • 设计模式
  • 剑指offer
大前端
  • javascript
  • vue
  • html
  • css
  • 🌏浏览器专题
  • Web性能优化
  • regexp
  • node
面试
  • 问解
  • javascript
  • css
  • 手撕代码
  • 性能优化
  • 综合问题
  • 面经汇总
  • 小程序
手撕代码
  • 数据结构与算法
  • javascript
  • css
个人站点
  • GitHub (opens new window)
  • 博客园 (opens new window)
  • 掘金 (opens new window)
线上作品
  • 轻取(文件收集) (opens new window)
  • 个人图床 (opens new window)
  • 考勤小程序 (opens new window)
  • 时光恋人 (opens new window)
  • 在线简历生成 (opens new window)
留言板
Github (opens new window)
author-avatar

粥里有勺糖

285

文章

40

标签

关于我
备战春秋
  • 心得总结
  • 校招考点汇总
  • 面经汇总
  • 复习自查
技术笔记
  • 技术教程
  • 模板工程
  • 源码学习
  • 技术概念
  • 个人作品
  • 学习笔记
计算机基础
  • 算法与数据结构
  • 操作系统
  • 计算机网络
  • 设计模式
  • 剑指offer
大前端
  • javascript
  • vue
  • html
  • css
  • 🌏浏览器专题
  • Web性能优化
  • regexp
  • node
面试
  • 问解
  • javascript
  • css
  • 手撕代码
  • 性能优化
  • 综合问题
  • 面经汇总
  • 小程序
手撕代码
  • 数据结构与算法
  • javascript
  • css
个人站点
  • GitHub (opens new window)
  • 博客园 (opens new window)
  • 掘金 (opens new window)
线上作品
  • 轻取(文件收集) (opens new window)
  • 个人图床 (opens new window)
  • 考勤小程序 (opens new window)
  • 时光恋人 (opens new window)
  • 在线简历生成 (opens new window)
留言板
Github (opens new window)
  • Javascript

    • javscript代码题
    • 简单-实现promiseAll
    • 简单-实现bind
    • 简单-实现call
    • 简单-实现apply
    • 简单-继承实现
    • 简单-new实现
    • 简单-instanceof实现
    • 简单-a同时等于多个值
    • 简单-闭包调用
    • 简单-立即执行的定时器
    • 中等-判断两个日期是否同一周
    • 中等-async/await实现
    • 中等-实现深拷贝
    • 中等-请求合并
    • 中等-数组去重

实现调用就执行一次的定时器

vuePress-theme-reco 粥里有勺糖    2018 - 2023

实现调用就执行一次的定时器

粥里有勺糖 2021-08-29 手撕代码javascript

# 实现调用就执行一次的定时器

# 问题描述

部分场景需要使用定时器延迟或者循环执行

通常在循环场景下又希望首次调用的时候立即执行一次

当然这个处理,也是比较简单的,但是看上去总觉得不太优雅

function fn(){}

fn()
const timer = setTimeout(fn,timeout)
1
2
3
4

咱的目的是整个优雅的setImmTimeout和setImmInterval,即在调用够会立即执行一次回掉函数

关于实现较准时的setTimeout,可以进一步阅读这篇文章 (opens new window),本文不涉及定时器的实现

# 前置知识

定时器的参数构成:

  1. func:被调用的函数
  2. delay:延迟的时间
  3. (可选)arg1-argN:传递给被调用函数的参数

返回值:一个标识目标计时器的非零数字,用于清楚目标计数器

参数构成如下,[]中包含的是可选的参数,并不是传递一个数组

(func, delay, [arg1, arg2, ...]);
1

# setImmX

朴素的实现方法如下,延迟执行前调用一次

function setImmTimeout(func, delay = 0, ...args) {
    if (typeof func !== 'function') throw new TypeError('func is not function')
    func.apply(this, args)
    return setTimeout(func, delay, ...args)
}

function setImmInterval(func, delay = 0, ...args){
    if (typeof func !== 'function') throw new TypeError('func is not function')
    func.apply(this, args)
    return setInterval(func, delay, ...args)
}
1
2
3
4
5
6
7
8
9
10
11
Edit this page (opens new window)
Last Updated: 2022/5/15 12:46:34