1、闭包
什么是闭包?
闭包是打通函数内部、外部的通道,使得外部可以访问函数内部的变量
典型应用:计数器
function Counter() {
let count = 0;
return {
increment: function() {
count++;
},
get: function() {
return count;
}
}
}
var foo = Counter()
foo.increment() // 1
foo.increment() // 2
console.log(foo.get()) // 2
如果不使用闭包的话,可以把count变量声明在函数外部,变成一个全局变量。但是这样容易造成变量污染
2、防抖、节流的区别
都是为了防止函数多次调用,区别在于:
(1)防抖:类似于游戏中的回城,每触发一次,就重新读秒,直到读秒完成,才执行。
应用场景:百度搜索的输入框、词条预览
(2)节流:一段时间内,只有第一次点击会生效,然后开始计时。类似于游戏中的技能cd
应用场景:点击按钮,发起后台请求
(1)防抖
function debounce(fn, delay) {
let time;
return function() {
if(time) {
clearTimeout(time)
}
time = setTimeout(fn, delay) // time是已经等待的时间
}
}
(2)节流
function throttle(fn, delay) {
let first = true;
return function() {
if(first) {
fn() // 立即执行
// 从执行成功之后开始计时
first = false
setTimeout(()=>{
first = true
}, delay)
}
}
}
如何调用?——调的是 闭包
function fn1() {
console.log('throttle')
}
function fn2() {
console.log('debounce')
}
let fn_debounce = debounce(fn2, 2000)
let fn_throttle = throttle(fn1, 2000)
// fn_debounce()、fn_throttle()是闭包,将其作为绑定事件
<button onclick="fn_debounce()">防抖按钮</button>
<button onclick="fn_throttle()">节流按钮</button>
3、内存泄漏
闭包会一直留存在内存中,除非手动清理
fn_debounce = null
fn_throttle = null