防抖与节流

防抖与节流

我的博客

第一次接触防抖与节流的概念是在一次面试中，但是当时并没有觉得防抖与节流很重要，知道后来学习vue做项目的时候才明白，防抖与节流能够有效地节省浏览器资源，因此更加深入地学习了防抖与节流的知识

函数防抖

当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。

在一个页面中我们会发现点击一次↓键会触发很多次scroll事件，如果我们在scroll事件中添加对是否显示回到顶部按钮条件的判定，那么这时会消耗大量的浏览器资源，做很多无用功，此时我们就需要防抖函数的出场了

我们提出这样一种设想： 当我们触发第一次scroll事件时启动一个延时函数，如果延时时间内再次触发了scroll事件，那么此时我们重新开始计时，直到延时时间内没有再次触发该事件然后再执行事件对应的函数

function debounce(fn, deplay = 1000) {
   
    let timer = null;
    return () => {
   
        if(timer) clearTimeout(timer);
        timer = setTimeout