防抖

1. 概念介绍

在没有使用防抖函数之前：当我们需要搜索某些物体信息时会导致浏览器压力很大，性能很低。"防抖函数"的作用就是等到用户停止输入的时候，才去执行函数，避免了多次执行造成的资源浪费。

防抖函数的定义：
当一个事件被触发准备执行事件处理函数时，会等待一定的时间（由自己设定时长），如果在这段时间内没有被再次触发，那就照常执行函数，如果被再次触发，那么上次触发作废，重新从新触发的时间开始计算，直到最终可以执行。

2. 函数实现

简单实现 :

function debounce(fn, delay) {//记录上一次的延时器let timer = nullreturn function () {//清除上一次的延时器clearTimeout(timer)//重新设置新的延时器timer = setTimeout(() => {fn.apply(this, arguments)}, delay)}
}

高阶优化： 第三个参数表示是否需要立即执行，默认不需要

function debounce(func, delay, immediate = false) {let timerlet isRun = falsereturn function () {// 判断定时器是否为空，如果为空，则会直接执行回调函数if (timer) clearTimeout(timer)// 判断是否立即执行if (immediate && !isRun) {func.apply(this, arguments)isRun = true// 如果没有第三个参数则执行简单版本} else {timer = setTimeout(() => {func.apply(this, arguments)isRun = false}, delay)}}
}

3. 应用场景

• 输入框频繁输入、搜索
• 按钮频繁点击、提交信息，触发事件，验证检测
• 窗口大小 resize 变化后，再重新渲染。

节流

1. 概念介绍

事件触发后，规定时间内，事件处理函数不能再次被调用。也就是说在规定的时间内，函数只能被调用一次，且是最先被触发调用的那次。如果这个事件会被频繁触发，那么节流函数会按照一定的频率来执行函数，不管在这个中间有多少次触发这个事件，执行函数的频繁总是固定的。

2. 函数实现

第一种方法：时间戳

function throttle(fn, delay) {//记录上一次函数触发的时间var lastTime = 0return function(){//记录当前函数触发的时间var nowTime = Date.now()if(nowTime - lastTime > delay){fn.apply(this, arguments)//同步执行结束时间lastTime = nowTime}}
}

第二种方法：定时器

function throttle(fn, delay) {let timer = nullreturn function () {if (!timer) {timer = setTimeout(() => {fn.apply(this, arguments)timer = null}, delay);}}
}

3. 应用场景

• 滚动加载更多
• 搜索框搜的搜索联想功能
• 高频点击
• 表单重复提交