【手写代码】防抖&节流

最新推荐文章于 2024-07-20 14:49:34 发布

Chailo.

最新推荐文章于 2024-07-20 14:49:34 发布

阅读量415

点赞数

分类专栏：面试 JavaScript基础手写代码文章标签： javascript

本文链接：https://blog.csdn.net/qq_51315315/article/details/120466783

版权

本文详细探讨了JavaScript中的防抖(debounce)和节流(throttle)技术，包括它们的定义、应用场景和手动实现。防抖用于限制函数的执行次数，确保在最后一次触发后执行，而节流则是在设定的时间间隔内执行函数，适用于需要频繁触发但不要求连续执行的场景。文中通过实例解析了防抖和节流的工作原理，并提供了手写代码的示例。

摘要由CSDN通过智能技术生成

一、防抖（debounce）

1. 定义

当连续触发一个事件时，将多次执行变成最后一次执行

2. 场景

有些事件会被频繁触发，但我们不需要他如此频繁，只在最后一次触发做操作即可。例如🌰搜索框的联想建议

3. 手写防抖

原理：在事件发生前，取消上一次的定时器，开启新的计时器

function debounce(func,wait){
    let timeout;
    return function(){
        let context=this;
        let args=arguments;
        clearTimeout(timeout);                  //使用到闭包
        //if(timeout)    clearTimeout(timeout); //我看到标准的这样写,更严谨
        //设置定时器，使事件间隔指定事件后执行
        timeout=setTimeout(function(){
            func.apply(context,args);           //改变执行函数内部this的指向和event指向
        },wait);
    }
}

//升级版-加入立即执行
function debounce(func,wait,immediate){
    let timeout;
    return function(){                  
        let context=this;
        let args=