防抖函数：持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次
某些代码不可以在没有间断的情况连续重复执行。
第一次调用函数，创建一个定时器，在指定的时间间隔之后运行代码。当第二次调用该函数时，它会清除前一次的定时器并设置另一个。
如果前一个定时器已经执行过了，这个操作就没有任何意义。然而，如果前一个定时器尚未执行，其实就是将其替换为一个新的定时器。目的是只有在执行函数的请求停止了一段时间之后才执行。
只有最后一次操作会被触发
/**
* 函数防抖，持续触发事件时，只有最后一次操作且delay时间后触发
* @param {function} fn 必填，要执行的函数
* @param {*} context 必填，作用域,指定上下文
* @param {number} delay 可选，延迟执行的时间
*/
debounce (fn, context, delay = 500) {
return function () {
let arg = arguments
clearTimeout(fn.timerId)
fn.timerId = setTimeout(function () {
fn.call(context, ...arg)
}, delay)
}
}
定义在vue的methods中的去使用：
@click="debounce(btnHandler, this)(1,2)" // ----有传参数
@click="debounce(btnHandler, this)()" //----无参数
window.addEventListener('scroll', this.debounce(this.scrollHandler, this))
简化后的函数防抖
使用箭头函数简化，代码如下：
/**
* 函数防抖，持续触发事件时，只有最后一次操作且delay时间后触发
* @param {function} fn 必填，要执行的函数
* @param {number} delay 可选，延迟执行的时间
*/
debounce (fn, delay = 500) {
return function () {
clearTimeout(fn.timerId)
fn.timerId = setTimeout(() => {
fn.call(this, ...arguments)
}, delay)
}
}
应用
window.onresize = function () {
var div = document.getElementById('myDiv')
div.style.height = div. offsetWidth + 'px'
}
改写为
function resizeDiv () {
var div = document.getElementById('myDiv')
div.style.height = div. offsetWidth + 'px'
}
window.onresize = function () {
debounce(resizeDiv,1500)()
}
定义在vue的methods中的去使用：
@click="debounce(btnHandler)(1,2)" // ----有传参数
@click="debounce(btnHandler)()" //----无参数
函数防抖将多次操作合并为一次操作，并在delay的时间后触发函数。如果在规定的delay时间内触发函数，清除之前的定时器并重新设置定时器，并在delay时间后触发函数。只有最后一次操作会被触发。
- 应用场景：实时输入去搜索时可以用到，window触发resize的时候
函数节流：持续触发事件时，在一定时间内只会触发一次
/**
* 节流函数，持续触发事件时，一定时间内只调用一次
* @param {function} fn 必填，要执行的函数
* @param {number} delay 可选，延迟执行的时间
*/
throttle (fn, delay = 1500) {
return function () {
if (!fn.timerId) {
fn.call(this, ...arguments)
fn.timerId = setTimeout(() => {
fn.timerId = null
}, delay)
}
}
}
定义在vue的methods中的去使用：
@click="throttle(btnHandler)(1,2)" // ----有传参数
@click="throttle(btnHandler)()" //----无参数
window.addEventListener('scroll', this.throttle(this.scrollHandler))
节流函数是要执行的函数执行后，在定义的delay时间内不再触发函数， 等定时器清除后再去触发函数。
- 应用场景：鼠标不断点击触发，监听滚动事件
至于用防抖函数还是节流函数就根据自己的需要去选择了
