程序员成长-修炼中心 「作者:陈楚城」
导航
博客文章
  • Github (opens new window)
  • 掘金 (opens new window)
组件库 (opens new window)
关于我

chamberlain

前端持续学习者
导航
博客文章
  • Github (opens new window)
  • 掘金 (opens new window)
组件库 (opens new window)
关于我
  • 写在前面
  • vue3学习总结

  • 项目相关

  • 性能优化

  • 你不知道的css

  • 常见问题总结记录

  • 数据结构与算法

  • 设计模式

  • TS & JS进阶

  • Node

  • HTTP

  • Linux

  • 开发工具篇

  • 收藏夹

  • OS

  • Nginx

  • 项目工程化

  • 数据库

  • 计算机网络

  • 环境搭建、项目部署

  • 常用工具

  • 自动化

  • js相关

    • 函数柯里化curry
    • 继承
    • 使用setTimeout模拟setInterval
    • 手写防抖和节流
    • 手写实现拖拽
    • create
    • 手写一个call或apply
    • bind
    • 手写一个instanceOf原理
    • 手写一个JS深拷贝
    • parse和JSOn.stringify
    • 手写一个map和reduce
    • 手写一个new操作符
    • LRU缓存算法
    • 手写Promise
    • set
    • random
    • 原型
    • 实现Symbol类型
  • QA相关

  • 文章收藏

  • note
  • jsNote
chamberlain
2022-03-14

使用setTimeout模拟setInterval

# 使用setTimeout模拟setInterval

// 可避免setInterval因执行时间导致的间隔执行时间不一致
// 写一个 mySetInterVal(fn, a, b),每次间隔 a,a+b,a+2b 的时间,然后写一个 myClear,停止上面的 mySetInterVal
class MySetInterVal {
    constructor(fn, a, b){
        this.fn = fn;
        this.a = a;
        this.b = b;
        this.count = 0;
        this.timer = null;
        this.start()
    }
    start () {
        let time = this.a+this.count*this.b;
        this.timer = setTimeout(()=>{
            this.fn(time)
            this.count++
            this.start();
        },time);
    }
    myClear () {
        clearTimeout(this.timer)
        this.timer = null;
        this.count = 0;
    }
}
const mySetInterVal = new MySetInterVal((time) =>{console.log('mySetInterVal-->'+time)},1000,1000)
// setTimeout(()=>{mySetInterVal.myClear()},5000)
// setTimeout(()=>{mySetInterVal.myClear()},9000)
setTimeout(()=>{mySetInterVal.myClear()},11000)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
更新时间: 3/15/2022, 12:28:01 AM
继承
手写防抖和节流

← 继承 手写防抖和节流→

最近更新
01
02
网站
06-10
03
nav
06-09
更多文章>
Theme by Vdoing | Copyright © 2019-2022 chamberlain | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式