一、什么是节流函数，什么是防抖函数，它们之间的区别是什么？
·节流函数：节流，可以理解为节省流量。当一个请求被用户在短时间内不停点击时（用户频繁发送一个数据请求），为了减轻服务器压力，需要设定一个时间，使得在规定的这个时间内，无论用户请求了多少次，就当一次执行。例子：玩游戏回城按钮按多次等于按一次。
·防抖函数：抖，即抖动。当用户使用搜索框时，输入一个内容就发送一次请求，继续输入则会继续发送（用户一直在发送多个不同的请求），为了防止这种情况发生，应在用户输入结束后延时发请求，而不是同步发送。
·区别：节流函数是将多个重复的请求在规定的时间内执行一次，防抖是将一段时间内不停被执行的不同请求，延迟规定的时间后再执行。
二、节流函数与防抖函数的实现。
1.节流函数
//创建一个节流函数
2.防抖函数
//1.创建一个基础的防抖函数
function debounce(fn, delay) { //定义一个定时器，保存上一次的定时器 const timer = null;//执行函数 const doDebounce = function () { //取消上一次的定时器 if (timer) { clearTimeout(timer) } //延迟执行 timer = setTimeout(() => { //外部传入的请求函数 fn() }, delay) } return doDebounce } // 2.使用this和多个参数实现 function debounce(fn, delay,) { //定义一次定时器，保存上一次的定时器 const timer = null
//真正执行的函数 const doDebounce = function (...args) { //取消上一次的定时器 if (timer) clearTimeout(timer)
//延迟执行，参数不止一个，采用展开语法 timer = setTimeout(() => { //外部传入真正要执行的函数 fn.apply(this, args) }, delay) }
return doDebounce } //3.在this的基础上判断是否立即执行 function debounce(fn, delay, immediate = false) { //定义一个定时器，保存上一次的定时器 const timer = null const isDone = false
//真正执行的函数 const doDebounce = function (...args) { //取消上一次的定时器 if (timer) clearTimeout(timer)
//是否立即执行 if (immediate && !isDone) { //即外部传入的immediate为真，则立即执行 fn.apply(this, args) isDone = true } else { //延迟执行，参数不止一个，使用展开语法 timer = setTimeout(() => { //外部传入执行函数 fn.apply(this, args) isDone = false }, delay) } } return doDebounce }
//4.在是否立即执行的基础上加入取消功能 function debounce(fn, delay, immediate = false) { //定义定时器，保存上一个 const timer = null const isDone = false
//真正执行函数 const doDebounce = function (...args) { //清除上一个定时器 if (timer) clearTimeout(timer)
//是否立即执行 if (immediate && !isDone) { fn.apply(this, args) isDone = true } else { //延迟执行 timer = setTimeout(() => { fn.apply(this, args) isDone = false }, delay) } }
//取消，由于函数也可作为对象使用，故添加一个重置函数 doDebounce.cancel = function () { if (timer) clearTimeout(timer) timer = null isDone = false }
return doDebounce } //5.在加入取消功能上添加返回值 function debounce(fn, delay, immediate = false) { //定义定时器，保存上一个 const timer = null const isDone = false
//真正执行函数 const doDebounce = function (...args) { //添加一个Promise对象 return new Promise((resolve, reject) => { //清除上一个定时器 if (timer) clearTimeout(timer)
//是否立即执行 if (immediate && !isDone) { //使用Promise的成功回调将其返回 const result = fn.apply(this, args) if (result) resolve(resolve) isDone = true } else { //延迟执行 timer = setTimeout(() => { //调用Promise的失败回调返回结果 const result = fn.apply(this, args) if (result) reject(result) }, delay) }
}) } //取消，由于函数也可作为对象使用，故添加一个重置函数 doDebounce.cancel = function () { if (timer) clearTimeout(timer) timer = null isDone = false } return doDebounce }
标签：防抖,定时器,const,节流,timer,fn,isDone,函数 From： https://www.cnblogs.com/jackdongdong/p/16837625.html