手写防抖(debounce)和节流(throttle)

最新推荐文章于 2024-08-25 13:14:30 发布
最新推荐文章于 2024-08-25 13:14:30 发布
阅读量1.1k 收藏 2
点赞数 1
文章标签： 前端 javascript es6 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45932460/article/details/126037823
版权
本文详细介绍了如何使用手写实现的防抖(debounce)和节流(throttle)函数，包括参数验证、this指向调整、立即执行、取消功能以及定时器实现。通过实例展示了如何在输入框事件中应用这些技巧，同时提供了取消操作的灵活性。
摘要由CSDN通过智能技术生成

目录

测试代码

防抖(debounce)

基本功能实现

添加参数及this指向功能

第一次立即执行功能

取消功能

节流(throttle)

基本功能实现

增加this执向

最后一次在禁止时间段内是否执行

添加取消按钮

定时器实现节流

测试代码

import debounce from './手写防抖.js';
import throttle from './手写节流.js';

const inputEl = document.querySelector("input");
const cancelBtn = document.querySelector("#cancel");

let onBody = function (event) {
    console.log('最新的内容为: ', event, this);
}

// 防抖测试代码 ---------------
let debounceChange = debounce(onBody, 3000);
inputEl.oninput = debounceChange;

cancelBtn.onclick = function () {
    debounceChange.cancel()
}

// 节流测试代码 ---------------
let throttleChange = throttle(onBody, 3000, true);
inputEl.oninput = throttleChange;

cancelBtn.onclick = function () {
    throttleChange.cancel()
}

防抖(debounce)

需求：使函数延迟X秒后执行，未执行前调用则重置延迟时间。

实现思路：每次触发清楚宏任务中的事件并重新添加定时器执行。

基本功能实现

function debounce1(fn, delay = 0) {
    let timer = null;
    // 参数验证
    try {
        if (typeof fn !== 'function') throw new Error('参数一不是一个函数！');
        if (typeof delay !== 'number' || delay < 0) throw new Error('参数二不是一个正数！');
    } catch (err) {
        console.log(err);
    }

    return function _debounce() {
        if (timer) clearTimeout(timer)
        timer = setTimeout(() => {
            fn()
        }, delay);
    }
}

添加参数及this指向功能

function debounce2(fn, delay = 0) {
    let timer = null;
    // 参数验证
    try {
        if (typeof fn !== 'function') throw new Error('参数一不是一个函数！');
        if (typeof delay !== 'number' || delay < 0) throw new Error('参数二不是一个正数！');
    } catch (err) {
        console.log(err);
    }

    // 这里的args是事件回调的参数，和定义方法时传递的不冲突
    return function _debounce(...args) {
        if (timer) clearTimeout(timer)
        timer = setTimeout(() => {
            fn.apply(this, args) //改变this指向并把onclick的event传递
        }, delay);
    }
}

第一次立即执行功能

function debounce3(fn, delay = 0, immediate = false) {
    let timer = null;
    let isInvoke = false
    // 参数验证
    try {
        if (typeof fn !== 'function') throw new Error('参数一不是一个函数！');
        if (typeof delay !== 'number' || delay < 0) throw new Error('参数二不是一个正数！');
        if (typeof immediate !== 'boolean') throw new Error('参数三未不是一个布尔值！');
    } catch (err) {
        console.log(err);
    }

    return function _debounce(...args) {
        if (timer) clearTimeout(timer)
        if (!isInvoke && immediate) {
            fn.apply(this, args) //改变this指向并把onclick的event传递
            isInvoke = true
        } else {
            timer = setTimeout(() => {
                fn.apply(this, args) //改变this指向并把onclick的event传递
                isInvoke = false
            }, delay);
        }
    }
}

取消功能

/**
 * 
 * @param {节流方法} fn 
 * @param {延迟时间} delay 
 * @param {是否立即执行} immediate 
 * @returns 
 */
export default function debounce(fn, delay = 0, immediate = false) {
    let timer = null;
    let isInvoke = false
    // 参数验证
    try {
        if (typeof fn !== 'function') throw new Error('参数一不是一个函数！');
        if (typeof delay !== 'number' || delay < 0) throw new Error('参数二不是一个正数！');
        if (typeof immediate !== 'boolean') throw new Error('参数三未不是一个布尔值！');
    } catch (err) {
        console.log(err);
    }

    const _debounce = function (...args) {
        if (timer) clearTimeout(timer)
        if (!isInvoke && immediate) {
            fn.apply(this, args) //改变this指向并把onclick的event传递
            isInvoke = true
        } else {
            timer = setTimeout(() => {
                fn.apply(this, args) //改变this指向并把onclick的event传递
                isInvoke = false
            }, delay);
        }
    }
    // 添加取消函数
    _debounce.cancel = () => {
        if (timer) clearTimeout(timer)
        timer = null
        isInvoke = false
    }

    return _debounce
}

节流(throttle)

需求：X秒内只能执行一次

实现思路：

对比调用时间及上次执行时间的差决定是否执行（时间戳）

每次执行设置定时器，X秒后才能再次执行当前函数。（定时器）

基本功能实现

function throttle1(fn, delay = 0) {
    let lastTime = 0
    // 参数验证
    try {
        if (typeof fn !== 'function') throw new Error('参数一不是一个函数！');
        if (typeof delay !== 'number' || delay < 0) throw new Error('参数二不是一个正数！');
    } catch (err) {
        console.log(err);
    }

    const _throttle = function () {
        // 当前时间
        let nowTime = new Date().getTime();

        // 设置间隔时间 - （ 当前时间 - 上一次执行时间 ）
        const remainTime = delay - (nowTime - lastTime)

        if (remainTime <= 0) {
            fn()
            lastTime = nowTime
        }
    }
    return _throttle
}

增加this执向

function throttle2(fn, delay = 0) {
    let lastTime = 0
    // 参数验证
    try {
        if (typeof fn !== 'function') throw new Error('参数一不是一个函数！');
        if (typeof delay !== 'number' || delay < 0) throw new Error('参数二不是一个正数！');
    } catch (err) {
        console.log(err);
    }

    const _throttle = function (...args) {
        // 当前时间
        let nowTime = new Date().getTime();

        // 设置间隔时间 - （ 当前时间 - 上一次执行时间 ）
        const remainTime = delay - (nowTime - lastTime)

        if (remainTime <= 0) {
            fn.apply(this, args)
            lastTime = nowTime
        }
    }
    return _throttle
}

最后一次在禁止时间段内是否执行

function throttle3(fn, delay = 0, trailing = false) {
    let lastTime = 0
    let timer = null
    // 参数验证
    try {
        if (typeof fn !== 'function') throw new Error('参数一不是一个函数！');
        if (typeof delay !== 'number' || delay < 0) throw new Error('参数二不是一个正数！');
        if (typeof trailing !== 'boolean') throw new Error('参数三不是一个布尔值！');
    } catch (err) {
        console.log(err);
    }

    const _throttle = function (...args) {
        // 当前时间
        let nowTime = new Date().getTime();

        // 设置间隔时间 - （ 当前时间 - 上一次执行时间 ）
        const remainTime = delay - (nowTime - lastTime)

        if (remainTime <= 0) {
            fn.apply(this, args)
            lastTime = nowTime
            clearTimeout(timer)
        } else {
            if (!trailing) return
            if (timer) clearTimeout(timer);
            timer = setTimeout(() => {
                fn.apply(this, args)
                lastTime = nowTime
            }, remainTime);
        }
    }
    return _throttle
}

添加取消按钮

/**
 * 
 * @param {节流函数} fn 
 * @param {延迟时间} delay 
 * @param {最后一次是否执行} trailing 
 * @returns 
 */
function throttle(fn, delay = 0, trailing = false) {
    let lastTime = 0
    let timer = null
    // 参数验证
    try {
        if (typeof fn !== 'function') throw new Error('参数一不是一个函数！');
        if (typeof delay !== 'number' || delay < 0) throw new Error('参数二不是一个正数！');
        if (typeof trailing !== 'boolean') throw new Error('参数三不是一个布尔值！');
    } catch (err) {
        console.log(err);
    }

    const _throttle = function (...args) {
        // 当前时间
        let nowTime = new Date().getTime();

        // 设置间隔时间 - （ 当前时间 - 上一次执行时间 ）
        const remainTime = delay - (nowTime - lastTime)

        if (remainTime <= 0) {
            fn.apply(this, args)
            lastTime = nowTime
            clearTimeout(timer)
        } else {
            if (!trailing) return
            if (timer) clearTimeout(timer);
            timer = setTimeout(() => {
                fn.apply(this, args)
                lastTime = nowTime
            }, remainTime);
        }
    }

    _throttle.cancel = function () {
        if (timer) clearTimeout(timer);
        timer = null
        lastTime = 0
    }

    return _throttle
}

定时器实现节流

/**
 * 
 * @param {节流函数} fn 
 * @param {延迟时间} delay 
 * @param {最后一次是否执行} trailing 
 * @returns 
 */
function throttle(fn, delay = 0, trailing = false) {
    let isInvoke = false
    let isLastInvoke = false
    let timer = null
    // 参数验证
    try {
        if (typeof fn !== 'function') throw new Error('参数一不是一个函数！');
        if (typeof delay !== 'number' || delay < 0) throw new Error('参数二不是一个正数！');
        if (typeof trailing !== 'boolean') throw new Error('参数三不是一个布尔值！');
    } catch (err) {
        console.log(err);
    }

    const _throttle = function (...args) {
        let _this = this
        function t() {
            timer = setTimeout(() => {
                if (isLastInvoke) {
                    isLastInvoke = false
                    fn.apply(_this, args)
                    t();
                } else {
                    isInvoke = false
                }
            }, delay);
        }

        if (!isInvoke) {
            isInvoke = true
            fn.apply(this, args)
            t();
        } else {
            if (!trailing) return
            isLastInvoke = true
        }
    }

    _throttle.cancel = function () {
        if (timer) clearTimeout(timer);
        timer = null
        isInvoke = false
        isLastInvoke = false  
    }

    return _throttle
}

派小琦
关注
手写通用防抖与节流函数
周周池的博客
04-20 297
我们经常会绑定一些持续触发的事件，比如resize、scroll、mousemove等等，如果事件调用无限制，会加重浏览器负担，导致用户体验差，我们可以使用debounce(防抖)和throttle(节流)的方式来减少频繁的调用，同时也不会影响实际的效果。 防抖的概念 触发事件后n秒后才执行函数，如果在n秒内触发了事件，则会重新计算函数执行时间 防抖函数可以分为立即执行，和非立即执行两个版本 直白点：一定时间内，只有最后一次操作有效，再过wait毫秒后才执行函数 使用场景：例如拖动改变浏览器大小的时候，需要
手写防抖和节流代码
dazhougege的博客
04-08 708
防抖-debounce:当一段时间内持续触发事件，只会执行最后一次。在延迟时间内，被触发，将刷新延迟时间。 const debounce = function(fn, delay){ let timer = null; return function()=> { let context = this; let args = arguments;...
JS面试题---什么是节流和防抖？怎样手写一个自己的节流和防抖工具函数
2202_75922690的博客
02-08 1429
JS面试题---什么是节流和防抖，如何手写，他们之间有什么区别，分别有哪些应用场景
手写防抖和节流
@Juneberry的博客
11-30 1269
性能优化之防抖和节流
手写防抖和节流函数
热门推荐
zep
03-16 1万+
一、认识防抖debounce函数 我们用一副图来理解一下它的过程： 当事件触发时，相应的函数并不会立即触发，而是会等待一定的时间； 当事件密集触发时，函数的触发会被频繁的推迟； 只有等待了一段时间也没有事件触发，才会真正的执行响应函数； 防抖的应用场景很多： 输入框中频繁的输入内容，搜索或者提交信息； 频繁的点击按钮，触发某个事件； 监听浏览器滚动事件，完成某些特定操作； 用户缩放浏览器的resize事件； 总结：防抖其实是延迟函数的执行，只有当等待了一段时间也没有事件触发时，才会真正去执行函数 1.
前端手写源码系列(一）—— 手写防抖和节流
最新发布
小庄zzz的博客
08-25 882
前端面经八股手戳源码系列，从底层带你实现防抖和节流，复盘应用场景
JS手写防抖和节流函数（超详细版整理）
m0_56698268的博客
03-27 6512
JavaScript手写防抖和节流函数，及应用场景优化
手写节流 throttle、防抖 debounce
hiahdnf的博客
07-25 161
手写节流防抖
手写防抖、节流函数
weixin_43484007的博客
06-08 784
本质上是优化高频率执行代码的一种手段如：浏览器的 resize、scroll、keypress、mousemove 等事件在触发时，会不断地调用绑定在事件上的回调函数，极大地浪费资源，降低前端性能为了优化体验，需要对这类事件进行调用次数的限制，对此我们就可以采用 防抖（debounce） 和 节流（throttle） 的方式来减少调用频率#定义函数防抖是指在事件被触发 n 秒后再执行回调，如果在这 n 秒内事件又被触发，则重新计时。这可以使用在一些点击请求的事件上，避免因为用户的多次点击向后端发送多次请求。
常见的手写面试题:节流/防抖/节流防抖
u014046079的博客
04-06 349
常见的手写面试题:节流/防抖/节流防抖 1.防抖 防抖:触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间 //防抖函数 function debounce (fn, delay) { let timer = null; return function () { let context = this; let args = arguments; if (timer) { clear
30_手写防抖节流-深拷贝-事件总线1
08-04
"手写防抖节流函数" 防抖和节流是前端开发中两个非常重要的概念，它们可以帮助我们解决频繁的事件处理问题，提高系统的性能。在本文中，我们将详细介绍防抖和节流的概念、原理、应用场景和实现过程。 防抖函数...
手写防抖 节流
qq_40774743的博客
09-25 207
functionthrottle(callback,wait=3000){ lettimer=null; letstartTime; returnfunction(){ constctx=this; constargs=arguments; constnow=+newDate();...
手写防抖与节流
weixin_69743436的博客
07-31 317
节流防抖
简单版-手写防抖(debounce)和节流(throttle)
无理. 的博客
10-04 1332
在前端需求开发中，经常需要绑定一些持续触发的事件，例如 scroll事件、onmouseover事件等等，但实际项目中我们并不希望这么频繁的去执行，因为会极大地浪费资源，降低应用性能。防抖和节流可以减少调用频率，目前是解决上边这个问题比较好的方案。防抖就是指触发事件后在 n 秒后函数只能执行一次，如果在 n 秒内又触发了该事件，则会重新计算函数的执行时间。比如 n=10，如果在第8秒又触发了，则又会从0秒开始计算。
实现防抖,节流
Falicitas的博客
03-21 407
防抖 function debounce(fn,wait,immediate){ let timer=null; return function Fn(){ const context=this; const args=arguments; if(timer) clearTimeout(timer); if(immediate){ let callNow=!timer; tim
手写节流与防抖
小白目的博客
03-24 1233
节流与防抖是前端项目开发中，节约请求资源的一种实用方式，实现方式也很简单。下面分别介绍其原理与实现： 1. 节流函数(throttle）：需要频繁触发的函数，在设定规定时间内，函数只触发一次，后面的触发要等间隔时间。（可以理解为：放技能需要等冷却） 应用场景：鼠标点击、滚轮事件 实现方式：一般采用时间戳 //fn:要被节流的函数 delay：间隔时间 function throttle(fn, delay) { let lastTime = 0; //记录上..
js 手写防抖和节流函数
04-16
好的，我可以回答你关于 JavaScript 手写防抖和节流函数的问题。 先，防抖和节流函数是为了解决高频率触发某个事件时，减少事件触发的次数，提高性能而设计的。 防抖函数的作用是在某个函数触发后，延迟一定的时间...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值