1.防抖(debounce):
思路:每次触发时都会取消之前的延时调用,防抖触发高频率事件时n秒后只会执行一次,如果n秒内再次触发,则会重新计算。
/**
* 要防抖动的函数
* 思路:每次触发时都会取消之前的延时调用
* @param func {Function} 要防抖动的函数
* @param t {number} 需要延迟的毫秒数
*
*/
function debounce(func, t=500){
let time
clearTimeout(time)
time = setTimeout(() => {
return function(){
func()
}
}, t)
}
2.节流(thorttle):
思路:每次触发事件时都会判断是否等待执行的延时函数;高频事件触发,每次触发事件时设置一个延迟调用方法,并且取消之前延时
调用的方法。
/**
* 节流方法
* 思路:每次触发事件时都会判断是否等待执行的延时函数
* @param func {Function} 要节流的函数
* @param t {number} 需要节流的毫秒
*
*/
function throttle (func, t=500) {
let time=null
if(!time){
time = setTimeout(() => {
return function(){
time=null
func()
}
},t)
}
}
防抖和节流区别:防抖和节流本质是不一样的。防抖是将多次执行变为最后一次执行,节流是将
多次执行变成每隔一段事件执行
函数防抖一定连续触发的事件,只在最后执行一次,而函数节流一段时间内只执行一次。
/**
* 节流方法
* 思路:每次触发事件时都会判断是否等待执行的延时函数
* @param func {Function} 要节流的函数
* @param t {number} 需要节流的毫秒
*
*/
function throttle (func, t=500) {
let time=null
if(!time){
time = setTimeout(() => {
return function(){
time=null
func()
}
},t)
}
}
/**
* 要防抖动的函数
* 思路:每次触发时都会取消之前的延时调用
* @param func {Function} 要防抖动的函数
* @param t {number} 需要延迟的毫秒数
*
*/
function debounce(func, t=500){
let time
clearTimeout(time)
time = setTimeout(() => {
return function(){
func()
}
}, t)
}
function funcDebounce(){
console.log('我是防抖动的函数')
}
function funcThrottle (){
console.log('我是节流方法')
}
debounce(funcDebounce,500) //调用抖动方法
throttle(funcThrottle ,500) //调用节流方法