-
写在前面:防抖(debounce)节流(throttle)这两个单词千万别写错,工作当中好多人自己封装的函数都写反了。
-
防抖debounce: 在事件被触发n秒后再执行回调函数,如果在这n秒内又被触发,则重新计时。
2-1. 实例(1) 用户在输入框中连续输入一串字符后,只会在输入完后去执行最后一次的查询ajax请求,这样可以有效减少请求次数,节约请求资源;实例(1) 用户在输入框中连续输入一串字符后,只会在输入完后去执行最后一次的查询ajax请求,这样可以有效减少请求次数,节约请求资源;
(2) window的resize、scroll事件,不断地调整浏览器的窗口大小、或者滚动时会触发对应事件,防抖让其只触发一次; -
简单实现代码:
3-1.
var debounce = function(idle, action){
var last
return function(){
var ctx = this, args = arguments
clearTimeout(last)
last = setTimeout(function(){
action.apply(ctx, args)
}, idle)
}
}
3-2. es6写法
3-2-1.
export const debounce = (fn, delay) => {
let timer = null;
return (params) => {
clearTimeout(timer);
timer = setTimeout(() => {
fn(params);
}, delay);
};
};
- 节流throttle:规定一个单位时间,在这个单位时间内,只能有一次触发事件的回调函数执行,如果在同一个单位时间内某事件被触发多次,只有一次能生效。
4-1. 实例:(1)鼠标连续不断地触发某事件(如点击),只在单位时间内只触发一次;
(2)在页面的无限加载场景下,需要用户在滚动页面时,每隔一段时间发一次 ajax 请求,而不是在用户停下滚动页面操作时才去请求数据;
(3)监听滚动事件,比如是否滑到底部自动加载更多,用throttle来判断; - 简单实现代码:
5-1.
var throttle = function(delay, action){
var last = 0;
return function(){
var curr = +new Date()
if (curr - last > delay){
action.apply(this, arguments)
last = curr
}
}
}
5-2. es6写法
5-2-1.
export const throttle = (fn, delay) => {
let last = 0;
return (params) => {
const curr = +new Date();
if (curr - last > delay) {
fn(params);
last = curr;
}
};
};