hgq's docs
主页
ES6-阮一峰 (opens new window)
Vue文档 (opens new window)
Axios文档 (opens new window)
Vue Router (opens new window)
Vuex文档 (opens new window)
面试题-Vue (opens new window)
面试题-JS (opens new window)

guoguoqiqi

漫不经心的向往
主页
ES6-阮一峰 (opens new window)
Vue文档 (opens new window)
Axios文档 (opens new window)
Vue Router (opens new window)
Vuex文档 (opens new window)
面试题-Vue (opens new window)
面试题-JS (opens new window)
  • call的实现
  • apply的实现
  • bind的实现
  • new的实现
  • instanceof的实现
  • Object create()的实现
  • Object assign()的实现
  • Promise的实现
  • 实现防抖函数(debounce)
  • 实现节流函数(throttle)
    • 深拷贝(deepclone)
    • 数组扁平化的实现(flat)
    • 函数柯里化
    • EventEmitter 实现
    • 数组的随机排序
    • 通用的事件侦听器函数
    • 实现一个JSONP
    • 数组的map方法
    • 数组的forEach方法
    • 数组的find方法
    • 数组的findIndex方法
    • 数组的some方法
    • 数组的filter方法
    • 数组的every方法
    • 数组的includes方法
    • 数组的fill方法
    • 数组的join方法
    • 数组的flat方法
    • 用setTimeout实现setInterval
    • 用setInterval实现setTimeout
    • 实现一个较完善的深拷贝
    • 代码手写
    guoguoqiqi
    2022-03-04

    实现节流函数(throttle)

    # 时间戳版

    function throttle(func, wait) {
        var context, args;
        var previous = 0;
    
        return function() {
            var now = +new Date();
            context = this;
            args = arguments;
            if (now - previous > wait) {
                func.apply(context, args);
                previous = now;
            }
        }
    }
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14

    # 定时器版

    function throttle(func, wait) {
        var context, args;
        var timeout = null;
        return function () {
            context = this;
            args = arguments;
            if (!timeout) {
                func.apply(context, args);
                timeout = setTimeout(() => {
                    timeout = null;
                }, wait);
            }
        }
    }
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14

    # 参考文章链接

    一杯茶的时间🍵,带你彻底学会手写防抖节流 (opens new window)

    ← 实现防抖函数(debounce) 深拷贝(deepclone)→

    最近更新
    01
    vuex数据持久化怎么做
    05-22
    02
    vue的动态路由怎么配置使用
    05-22
    03
    vue权限控制一般怎么做
    05-22
    更多文章>
    Theme by Vdoing | Copyright © 2022-2022 Guoquoqiqi | MIT License
    • 跟随系统
    • 浅色模式
    • 深色模式
    • 阅读模式