JS函数的防抖和节流

太过爱你忘了你带给我的痛 2022-12-28 14:13 183阅读 0赞

**为什么要有防抖和节流？**  
为了解决当用户点击请求过快的时候，服务器来不及相应，造成延迟卡死的情况；  
防抖 或 节流 ： 限制函数的执行次数；

#### 防抖 ####

防抖：函数在n 秒内只执行一次，如果在n秒内又触发执行，则重新计算函数执行时间；  
简而言之就是在多秒内触发多次请求，之执行最后一次操作  
防抖特点：延迟----不断刷新定时器  
防抖缺点：一直点击，可能一直得不到触发；  
fn是要执行的函数

// 防抖
    const debounce = (fn, wait)=> {     
        let timeout;    
        return ()=> {         
            // 每当用户触发事件的时候把前一个 setTimeout clear 掉
            clearTimeout(timeout);        
            // 然后又创建一个新的 setTimeout, 这样就能保证wait 间隔内如果时间持续触发，就不会执行 fn 函数
            timeout = setTimeout(()=>{ fn()}, wait);    
        }
    }
    // 处理函数
    const handle = ()=> {     
        console.log(`防抖:${ Math.random()}`); 
    }
    // 滚动事件
    window.addEventListener('scroll', debounce(handle, 1000));

#### 节流 ####

节流：连续触发只执行一次，只执行第一次点击操作的；  
特点：只执行一次，设置标识位，看能不能触发事件；

**什么是arguments ？**  
arguments是类数组对象，我们经常会给这个函数传递一些参数，js把传入到这个函数的全部参数存储在一个叫做arguments的东西里面，因为类数组对象和数组有很多的共性，所以我们经常可以用call方法，让类数组对象也使用的数组的一些方法；

function showargs() { 
    	console.log( arguments );
    }
    showargs(1,2,3,4,5);