防抖
防抖:多次触发某个函数,以最后一次函数的执行为准。
也就是说给定了一个时间n,如果在n毫秒内重复执行某个函数那么将不会执行,如果n毫秒内不再触发这个函数,那么将执行该函数。表现的效果是如果一直触发函数,那么只有最后一次才会执行。
简单实现:
代码语言:javascript复制function debounce(func, wait) {
var timeout;
return function () {
var context = this;
var args = arguments;
clearTimeout(timeout)
timeout = setTimeout(function(){
func.apply(context, args)
}, wait);
}
}
简单使用:
代码语言:javascript复制var fn = debounce(function (){
console.log("函数执行了");
},500);
fn();// 第一次 并不会执行
fn();// 第二次 并不会执行
fn();// 第三次 由于500毫秒后没有再次执行 所以会在500毫秒后打印"函数执行了"
防抖适用场景:多次重复的操作以最后一个为准的。就比如列表页有一个查询按钮,往往我们多次查询的结果都是以最后一次的结果为准,这里就可以用防抖。
节流
节流:多次触发某个函数,一段时间内只执行一次。
也就是说给定了一个时间n,如果在n毫秒内该函数多次调用那么会忽略这些调用,等n毫秒后会执行该函数。表现的效果是如果一直触发函数,那么每隔n毫秒就会执行一次函数。
简单实现:
代码语言:javascript复制function throttle(func, wait) {
var timeout = null;
return function() {
var context = this;
var args = arguments;
if (!timeout) {
timeout = setTimeout(function(){
timeout = null;
func.apply(context, args)
}, wait)
}
}
}
节流适用场景:将密集型操作,转换为相对松散型的操作,以减小计算量。就比如onmousemove
和onresize
事件的处理等。
lodash
库已经对防抖和节流做了实现,我们可以直接使用。