特别注意:从下面的代码,我们也可以的出JavaScript的各种事件是异步的,要不然,setTimeout
也不可能执行。
为什么需要防抖和节流
本质上是优化高频率执行代码的一种手段
如:浏览器的
resize
、scroll
、keypress
、mousemove
等事件在触发时,会不断地调用绑定在事件上的回调函数,极大地浪费资源,降低前端性能为了优化体验,需要对这类事件进行调用次数的限制,对此我们就可以采用
throttle
(防抖)和debounce
(节流)的方式来减少调用频率
防抖
何为防抖?
在JavaScript中很多的事件,如果一个事件被触发后,它是n秒后结束才执行,如果在n秒内再次触发该时间,那么重新计时。也就是说,让事件再没有被触发的n秒后再处理。
为什么要使用防抖?
这是为了性能优化。
比如,我们对输入框的的手机号码验证,如果用户输入一次就验证一次,会降低性能,所以我们规定在用户停止输入后的n秒后,再去检查输入的手机号码是否合理。
窗口大小
resize
。只需窗口调整完成后,计算窗口大小。防止重复渲染。
第一版代码
- 使用闭包,防止污染全局环境,也使得外部可以访问到该变量
const debounce = function(fun,delay){// fun就是回调函数
let timeout;// 这里使用了闭包
return function(){
const context = this;// 保存this,当然也可以使用箭头函数
clearTimeout(timeout);
timeout = setTimeout(function(){
fun.apply(context);// 如果这里不这样的话,那么this将指向window
},delay);
}
}
第二版代码
函数可能还会传递参数。比如event对象
const debounce = function(fun,delay){
let timeout;// 这里使用了闭包
let arg1 = arguments;// 传递给回调函数的参数
return function(){
const context = this;// 保存this,当然也可以使用箭头函数
let arg2 = arguments;// 这就是event,由游览器传递,通常是最后一个参数
clearTimeout(timeout);
timeout = setTimeout(function(){
fun.apply(context,...arg1,...arg2);// 如果这里不这样的话,那么this将指向window
},delay);
}
}
第三版代码
有些时候,我们想要第一次触发时就立即执行一次,然后等到停止触发 n 秒后,才可以重新触发执行(还是立即执行)。
const debounce = function (fun, delay, immediate) {
let timeout; // 这里使用了闭包
let arg1 = arguments; // 传递给回调函数的参数
return function () {
const context = this; // 保存this,当然也可以使用箭头函数
let arg2 = arguments; // 这就是event,由游览器传递,通常是最后一个参数
clearTimeout(timeout);
if (immediate) {
let callNow = !timeout;// 判断是否执行过,第一次会立即执行,等待n秒后,再次触发又会立即执行
timeout = setTimeout(function(){
timeout = null;
},delay);
if(callNow) fun.apply(context,...arg1, ...arg2)
} else {// 不需要立即执行
timeout = setTimeout(function () {
fun.apply(context, ...arg1, ...arg2); // 如果这里不这样的话,那么this将指向window
}, delay);
}
};
};
节流
何为节流?
n秒内只运行一次,若在 n 秒内重复触发,只有一次生效,它不会向防抖一样会重新计时。
为什么要使用节流?
这是为了性能优化。
搜索框,搜索联想功能
轮播图的节流,点击一次,只有等待动画结束后再次点击才有作用。
滚动加载,加载更多或滚到底部监听,在一定时间内只需要发送一次
ajax
请求,而不是有多少发送多少次。总的来说就是为了防止重复的操作。
时间戳写法的节流代码
function throttle(fun,delay = 500){ // 单位是ms
let oldtime = 0;// 这里必须设置为0,第一次才能立即执行
let context;
return function(){
context = this;
let now = Date.now();
if(now - oldtime >= delay){
fun.apply(context,...arguments);
oldtime = now;
}
}
}
优点:立即执行。
代码很简单,但是缺点也很明显。当停止触发后,之后无法在触发了,这是因为oldtime
的原因。而且最后一次不会执行,因为一旦停止事件,now
是不会更新的。
定时器写法的节流代码
function throttle(fun,delay = 500){ // 单位是ms
let timer = null;
let context;
return function(){
context = this;
if(!timer){
timer = setTimeout(()=>{
fun.apply(context,...arguments);
timer = null;
},delay);
}
}
}
优点:可以二次触发,而且离开后的最后一次也会执行(定时器在管理)。缺点:不能立即触发。
两种写法合并在一起
function throttle(func, wait) {
var timeout, context, args, result;
var previous = 0;
var later = function() {
previous = +new Date();
timeout = null;
func.apply(context, args)
};
var throttled = function() {
var now = +new Date();
//下次触发func剩余的时间
var remaining = wait - (now - previous);
console.log(remaining);
context = this;
args = arguments;
// 如果没有剩余的时间了或者你改了系统时间
if (remaining <= 0) {
if (timeout) {
clearTimeout(timeout);
timeout = null;
}
previous = now;
func.apply(context, args);
} else if (!timeout) {
timeout = setTimeout(later, remaining);
}
};
return throttled;
}
区别
相同:
- 都可以通过使用
setTimeout
实现 - 目的都是,降低回调执行频率。节省计算资源
不同:
函数节流不管事件触发有多频繁,都会保证在规定时间内一定会执行一次真正的事件处理函数,而函数防抖只是在最后一次事件后才触发一次函数。
防抖是将多次执行变为最后一次执行,节流是将多次执行变成每隔一段时间执行。