当前位置: 首页 > article >正文

手写防抖函数、手写节流函数

文章目录

  • 1 手写防抖函数
  • 2 手写节流函数

1 手写防抖函数

  • 函数防抖是指在事件被触发n秒后再执行回调,如果在这n秒内事件又被触发,则重新计时。
  • 这可以使用在一些点击请求的事件上,避免因为用户的多次点击向后端发送多次请求。
function debounce(fn, await) {
    let timer = null;
    return function() {
        let self = this;
        let args = arguments;
        if (timer) {
            clearTimeout(timer);
            timer = null;
        }
        timer = setTimeout(() => {
            fn.call(self, args);
        }, await);
    }
}

2 手写节流函数

  • 函数节流是指规定一个单位时间,在这个单位时间内,只能有一次触发事件的回调函数执行,如果在同一个单位时间内某事件被触发多次,只有一次能生效。
  • 节流可以使用在scroll函数的事件监听上,通过事件节流来降低事件调用的频率。
function throttle(fn, delay) {
    let curTime = Date.now();
    return function() {
        let context = this;
        let args = arguments;
        let nowTime = Date.now();
        if (nowTime - curTime >= delay) {
            curTime = Date.now();
            return fn.apply(context, args);
        }
    }
}

http://www.kler.cn/a/528834.html

相关文章:

  • oracle: 多表查询之联合查询[交集intersect, 并集union,差集minus]
  • 大模型培训讲师老师叶梓分享:DeepSeek多模态大模型janus初探
  • 药店药品销售管理系统的设计与实现
  • C_C++输入输出(下)
  • Leetcode::81. 搜索旋转排序数组 II
  • Android记事本App设计开发项目实战教程2025最新版Android Studio
  • 【Rust自学】18.1. 能用到模式(匹配)的地方
  • Python在线编辑器
  • Python 环境隔离和实现方法
  • 【LeetCode 刷题】二叉树-公共祖先
  • TensorFlow简单的线性回归任务
  • OpenAI推出o3-mini推理模型,首次免费开放,性能超越o1,AIME测试准确率高达87.3%
  • 牛客题目分享:JZ64 求1+2+3+...+n(用static成员和构造函数的方法)(C++)
  • 记6(人工神经网络
  • 数据结构:优先级队列—堆
  • C++ strcpy和strcat讲解
  • NeetCode刷题第19天(2025.1.31)
  • 二、CSS笔记
  • 掌握API和控制点(从Java到JNI接口)_35 JNI开发与NDK 03
  • Hot100之子串
  • [AI]安装open-webui时报部分安装失败
  • C++:虚函数与多态性习题
  • [ACTF2020 新生赛]Exec 1
  • 记忆力训练day11
  • FFmpeg工具使用基础
  • 844.比较含退格的字符串