函数节流和函数防抖,两者都是优化高频率执行js代码的一种手段。
在一定时间内,代码执行的次数不一定要非常多。达到一定频率就足够了。因为跑得越多,带来的效果也是一样。倒不如,把js代码的执行次数控制在合理的范围。既能节省浏览器CPU资源,又能让页面浏览更加顺畅,不会因为js的执行而发生卡顿。这就是函数节流和函数防抖要做的事。
一.节流
定义:触发函数事件后,短时间间隔内无法连续调用,只有上一次函数执行后,过了规定的时间间隔,才能进行下一次的函数调用。
原理:节流函数不管事件触发有多频繁,都会保证在规定时间内一定会执行一次真正的事件处理函数。
实现:实现节流方式有两种,一种是时间戳,另一种是定时器
//节流函数
function throttle2(fn, delay) {
let preTime = Date.now()
return function() {
const context = this
let args = arguments
let nowTime = Date.now()
if (nowTime - preTime >= delay) {
fn.apply(context, args)
preTime = Date.now()
}
}
}
//处理函数
function handle(){
console.log(document.body.scrollTop || document.documentElement.scrollTop)
}
//滚动事件
document.addEventListener("scroll",throttle2(handle,500))
// 节流throttle代码(定时器):
function throttle(func, delay) {
var timer = null;
return function() {
var context = this;
var args = arguments;
if (!timer) {
timer = setTimeout(function() {
func.apply(context, args);
timer = null;
}, delay);
}
}
}
//处理函数
function handle() {
console.log(document.body.scrollTop || document.documentElement.scrollTop);
}
//滚动事件
document.addEventListener('scroll', throttle(handle, 1000));
使用场景:
可以将一些事件降低触发频率。比如懒加载时要监听计算滚动条的位置,但不必每次滑动都触发,可以降低计算的频率,而不必去浪费资源;另外还有做商品预览图的放大镜效果时,不必每次鼠标移动都计算位置。
二.防抖
定义:多次触发事件后,事件处理函数只执行一次,并且是在触发操作结束时执行。
原理:对处理函数进行延时操作,若设定的延时到来之前,再次触发事件,则清除上一次的延时操作定时器,重新定时。
// 防抖
function debounce(fn, wait) {
//用来记录当前执行函数的状态
var timeout = null;
return function() {
if(timeout !== null) {
//清除正在执行的函数
clearTimeout(timeout);
}
timeout = setTimeout(fn, wait);
}
}
// 处理函数
function handle() {
console.log(Math.random());
}
// 滚动事件
document.addEventListener('scroll', debounce(handle, 500));
当持续触发scroll事件时,事件处理函数handle只在停止滚动1000毫秒之后才会调用一次,也就是说在持续触发scroll事件的过程中,事件处理函数handle一直没有执行。
debounce
函数封装后,返回内部函数- 每一次事件被触发,都会清除当前的
timer
然后重新设置超时并调用。这会导致每一次高频事件都会取消前一次的超时调用,导致事件处理程序不能被触发- 只有当高频事件停止,最后一次事件触发的超时调用才能在
delay
时间后执行
使用场景:
- 输入框(搜索,用户名,密码等),只有等用户输入完毕时,才去检查格式是否正确,用防抖来节约请求资源。https://github.com/jinyajuan/study/blob/master/new_file4.html
- window触发resize,不断的调整浏览器窗口大小,用防抖来让其只触发一次(监听滚动条位置,就可以将防抖函数应用其中)。