今天学习了函数节流与防抖 对此做点小结
函数节流
函数节流与防抖在做什么事情呢?其实是在控制事件处理程序的执行频率
但我们为什么要控制事件回调的执行频率呢?是因为在浏览器当中有一些事件 比如说 onresize事件也就是窗口的变化事件和 mousemove鼠标移动事件还有 scroll事件窗口滚动事件 这些事件的触发频率非常高 极有可能会造成页面卡顿 如果说在这个事件处理程序当中 还包含了与后端的交互 这样还会给后端增加很多压力 所以这个时候函数的节流与防抖控制频率就显得非常重要了
下面通过代码实现向大家演示 节流
04-throttle.js
// 第一个参数是回调 第二个参数是等待间隔
function throttle(callback, wait){
// 定义开始时间
let start = 0;
// 返回结果是一个函数
return function(e){
// console.log('iloveyou');
// 获取当前的时间戳
let now = Date.now();
// 判断
if(now - start >= wait){
// 若满足条件 则执行回调函数
callback.call(this, e);
// 修改开始时间
start = now;
}
}
}
04-throttle.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>节流测试</title>
<script src="04-throttle.js"></script>
<style>
body{
height: 2000px;
background: linear-gradient(#125,#eae);
}
</style>
</head>
<body>
<script>
//绑定滚动事件
// window.addEventListener('scroll',function(){
// console.log(Data.now());
// })
window.addEventListener('scroll',throttle(function(e){
// console.log(Date.now());
// console.log(this);
console.log(e);
},500));
</script>
</body>
</html>
如果在 04-throttle.html
单纯调用 function函数 鼠标一次滚动可能会有十几次的滚动事件触发 而这对我们服务器性能的消耗是很大的 我们需要对此进行性能的优化 我们在 04-throttle.js
自定义了throttle函数 它具备两个形参 第一个是我们的回调函数 第二个是时间间隔 我们设定在同一时间间隔中只执行一次callback() 这样便会降低事件触发的频率 提升性能优化
注意点
- 时间间隔通过获取两次时间戳进行差值判断就可以得到
- throttle自定义函数的返回值必须是一个函数事件 否则无法被监听
- JS中 this指向的是事件源 谁调用this就是谁的
函数防抖
函数防抖跟函数节流有些区别,函数防抖
是当事件触发之后 它不会立即执行回调函数 而是会等待一段时间再去执行回调 在等待的时间过程中 如果你再次触发了事件 它会再次等待 上一个事件处理程序则不会执行 直到有新事件触发等待超过时间间隔 才进行回调
举个例子,我们设置时间间隔是1s 事件是A 当我们触发事件A超过等待时间间隔(1s)时 触发事件A回调 而如果是我们触发了时间A并在同一等待时间间隔内(1s)再次触发事件A(一次或多次,例如总共触发了5次
) 那么触发事件A只有在最后一次触发才回调(也就是第5次
才会进行回调,前面的回调都被取消 因为是最后一次 所以最后不会有新的触发事件A了 等待时间超过时间间隔了1s了 所以第5次触发回调进行)
下面通过代码实现向大家演示 防抖
05-debounce.js
function debounce(callback, time){
// 定时器变量
let timeId = null;
// 返回一个函数
return function(e){
// 判断
if(timeId !== null){
// 清空定时器
clearTimeout(timeId);
}
// 启动定时器
timeId = setTimeout(() => {
// 执行回调
callback.call(this, e);
// 重置定时器
timeId = null;
}, time);
}
}
05-debounce.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>防抖测试</title>
<script src="05-debounce.js"></script>
</head>
<body>
<input type="text">
<script>
let input = document.querySelector('input');
// 当键盘按下时 会有对应的keyCode返回
// input.onkeydown = function(e){
// console.log(e.keyCode);
// }
input.onkeydown = debounce(function(e){
console.log(e.keyCode);
},1000);
</script>
</body>
</html>
setTimeout定时器有个特点是它内部的this指向外层作用下this的值 所以 05-debounce.js
中的callback参数直接写this就可以
debounce的返回值必须是一个函数 因为我们本来就需要给onkeydown绑定(/定义)事件 如果不是函数的话 onkeydown事件在触发之后没法去执行回调
return返回的函数需要加事件回调(事件对象)参数 因为内部要用到的话 会往里边传入参数 如果你没有形参去接收 到时候没有办法获取到事件对象
下图的timeId虽然设置为null 但debounce函数在二次调用的情况下timeId并不等于null 而是上个定时器留给我们的timeId值 所以下面的if判断 如果过了时间间隔 执行if判断是无用功的 因为上个定时器已经执行完便已经失效了 我们想要的是:当未超过同一时间间隔时, 调用新的定时器则清空上一个定时器
超过同一时间间隔 应该交由setTimeout定时器去重置timeId值就行 降低性能资源消耗
所以,if判断和setTimeout对timeId值的重置都不能省 因为一个是未执行的清空 另一个是执行完的清空 我们的目标效果是同一时间间隔有多个定时器调用时 只执行最后一个定时器的回调
而下图中的 timeId = null
如果没有写的话 目标效果虽然也能达成 但是有小瑕疵 逻辑并不严谨 执行了些无用代码 因为它每一次都要进入if判断语句去清空(如果定时器执行完的话(也就是超过了time时间间隔后才执行任务))它的清空是没用的 因为上个定时器已经执行完失效了 所以这会造成浪费性能 正确方式是 在setTimeout定时器最后补上语句 timeId = null
重置定时器变量 当我们在上一次定时器执行成功时 执行回调之后应该要将这个定时器变量给它复原 以此来优化性能 更为合理一些
小结
通过自定义 debounce
事件就可以很好的控制事件的触发频率 特别是相关关键字搜索的功能 它与服务器是直接挂钩的 你输入什么就会传递给服务器什么 如果你不控制触发频率 程序便会向服务器发送大量请求 给服务器造成压力 这是我们当前对防抖做的一个实现