|
前言
前两天面试 ，面试官问我闭包的应用场景，我没有回答出来，最近看了看，其中一个场景就是函数防抖节流。
开始实验
函数防抖是指在函数被高频触发时当停止触发后延时n秒再执行函数（即每次触发都清理延时函数再次开始计时），一般用于resize，scroll，mousemove等 现在我们来实现一个功能 在输入框中输入一个字符，先显示waiting ，延迟1秒后 在下方输出 这个字符，（就像百度搜索框 单机版） 如图
function delay(e) {
let timeout;
timeout = setTimeout(()=>{
showInfo(e)
}, 1000);
}
document.getElementById('input').addEventListener('input',delay)
document.getElementById('input').addEventListener('input',function(){
document.getElementById('show').innerHTML='waiting'
})
如果没有使用防抖 就会像下面这样，多次调用就会添加多个settimeout到任务队列，1秒后执行，这样就会交叉显示了，当输入频率很快时就会这样。 (抖不抖？？？)  下面我们使用防抖技术
function showInfo(text){
document.getElementById('show').innerHTML=text.target.value
}
function debounce(func, wait) {
let timeout;
return function () {
let context = this;
let args = arguments;
if (timeout) clearTimeout(timeout);
timeout = setTimeout(() => {
func.apply(context, args)
}, wait);
}
}
document.getElementById('input').addEventListener('input',debounce(showInfo,1000))
document.getElementById('input').addEventListener('input',function(){
document.getElementById('show').innerHTML='waiting'
})
 这样才算正常。（稳！！） 现在来说为什么要用闭包？ 我们可以看到 在上面代码中 将timeout变量变成全局变量也是可以实现的，如下代码。
let timeout;
function delay(e) {
if (timeout) clearTimeout(timeout);
timeout = setTimeout(()=>{
showInfo(e)
}, 1000);
}
document.getElementById('input').addEventListener('input',delay)
document.getElementById('input').addEventListener('input',function(){
document.getElementById('show').innerHTML='waiting'
})
因为这会出现如下问题： 1、对于一个页面上需要多个防抖函数的时候，需要写很多重复代码。 2、全局变量污染作用域
这时候闭包的优势就体现出来了，保护全局作用域不被污染,又能做到函数复用，我们只需要封装这么一个debounce函数就可以了：
function debounce(func, wait) {
/*
@ func 延迟执行的函数
@ wait 延迟时间
*/
let timeout;
return function () {
let context = this;
let args = arguments;
if (timeout) clearTimeout(timeout);
timeout = setTimeout(() => {
func.apply(context, args)
}, wait);
}
}
|