这是我参与「第四届青训营 」笔记创作活动的的第2天

防抖与节流

昨天跟着月影老师的对JavaScript的学习讲解过程中，发现了防抖与节流、JavaScript自定义事件自己不是很清楚，在这里对防抖与节流进行记录

概念解读区分

防抖 ： 每一次触发事件，都重新计时，直到事件执行结束

节流 ： 只要在一个事件的执行期间内，其他的每次触发事件都不会生效

简单来说就是，防抖是事件停止触发且过了指定时间后执行一次，节流是间隔指定的时间执行一次。

使用场景

防抖

用户多次短时间多次点击，导致客户端向服务端发送大量请求，造成服务端压力。

用户输入内容时，不断向服务端发送请求。

防抖常用于防止用户频繁向服务器发送请求，或者避免浏览器的画面过于频繁地重绘。

节流

页面滚动事件

鼠标连续触发事件

同一件事多次执行

目的

防抖 ：减少请求次数，降低服务端压力，增加性能

节流 ： 控制一段时间内，事件发送频率

总的来说，都是为了降低压力，进行性能的优化。

使用

防抖

function debounce(fn,argument) { 
    // 创建一个变量用来存放定时器的返回值（使用闭包知识点） 
    let timer = null;
    //返回一个函数
    return function() { 
        // 每次当用户触发事件的时候，把前一个定时器清除 
        clearTimeout(timer); 
        // 然后创建一个新的定时器，保证用户事件只触发一次
        timer = setTimeout(() => { 
        //此时this指向触发函数的事件，因此绑定的argument就是事件的参数列表，也就是该函数原本的参数列表
            fn.apply(this, arguments)
        }, 1000); 
    } 
}

节流

function throttle(fn, delay) { 
    // 初始化一个时间 
    let begin = 0; 
    return function() { 
        // 获取当前时间戳 
        let cur = new Date().getTime(); 
        // 只有两次触发的时间间隔大于指定值，才会触发事件函数 
        if (cur - begin > delay) { 
        fn.apply(this, arguments); 
            begin = cur; 
        } 
    } 
}