一. 防抖函数的定义与使用
防抖函数的定义
function debounce(fn, interval = 300) {
let timeout = 0; // timeout占位
return () => { // 返回闭包函数 timeout保留作用域
console.log('=====清除==========');
clearTimeout(timeout); // 先清除上一个timeout
timeout = setTimeout(() => { //重新给timeout赋值，interval时间之后执行cb
fn.apply(this, arguments);
}, interval);
};
}
防抖函数的调用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button>点击测试防抖</button>
</body>
<script src="index.js"></script>
<script>
var index = 0;
var btn = document.querySelector('button');
btn.onclick = debounce(function () {
console.log(index++);
},500)
</script>
</html>
二. 防抖函数应用场景
其实在HTML 和javaScript 中防抖函数其实有很多的应用场景:
-
监控页面 img 标签的加载情况, 当img标签的图片下载完成后(即: load后) 对页面进行刷新, 如果html 页面中的每个img标签加载完成图片后就刷新页面, 那么频繁的刷新对性能和用户体验都不是很好, 这时可以使用防抖函数, 防止连续的刷新.
-
HTML 中某个按钮, 防止频繁的点击操作, 可以使用防抖函数.
-
HTML 页面中的上拉/ 下拉刷新可以使用防抖函数
三. 防抖函数使用注意事项:
- 防抖函数在使用时, 必须要使用变量引用保住他的命, 否则防抖函数,延迟时间结束后, 防抖函数不会触发对应函数的调用
- 正确做法1:
<script>
var index = 0;
var btn = document.querySelector('button');
// 使用btn DOM标签持有防抖函数,保住它的命
btn.onclick = debounce(function () {
console.log(index++);
},500)
</script>
- 错误的做法
<script>
var index = 0;
var btn = document.querySelector('button');
// 使用btn DOM标签持有防抖函数,保住它的命
btn.onclick = function(){
// 函数一调用, 防抖函数的命就没了
debounce(function () {
console.log(index++);
},500)
}
</script>
- 正确做饭2
<script>
var index2 = 0;
// 持有防抖函数(保住它的命)
let bounceFunc = debounce(function () {
console.log(index2++);
},500)
var btn2 = document.querySelector('.btn2');
// 在适当的时候调用防抖函数做事即可
btn2.onclick = function () {
bounce2()
}
</script>
四. 总结防抖函数的使用,就2步:
- 实例化防抖函数, 并持有防抖函数(说清楚防抖函数做什么, 延时时间是多长 )
- 调用/触发防抖函数防抖
<script>
var index2 = 0;
// 1.实例化防抖函数, 并持有防抖函数
let mybounce= debounce(function () {
console.log(index2++);
},500)
var btn2 = document.querySelector('.btn2');
// 在适当的时候调用防抖函数做事即可
function refresh(){
mybounce();
}
</script>
网友评论