高级JavaScript中的闭包、防抖和节流,到底是怎么样的?
2024-01-10 12:07:33
闭包
从语法结构来说 闭包是一种JS特有的函数嵌套结构
行成闭包的三个必要条件:
1. 函数嵌套(至少有两个函数)
2. 内层函数中使用了外层函数的变量或参数
3. 内层函数被返回到外部在外部使用
闭包的作用:
1. 保护具有共享意义的变量
2. 隔离作用域 避免作用域污染
3. 为变量提供对外访问接口
闭包的缺点:
1. 概念复杂 不易理解
2. 占用过多资源(内存) 大量使用不利于代码优化
闭包作用域中的值 不会随垃圾回收机制销毁;销毁闭包的方式是将闭包的函数赋值为null
let func = (function () {
let a = 10;
return func2;
function func2() {
a++;
console.log(a);
}
})();
func(); // 这就是一个简单的闭包
?
防抖
给高频事件降频
事件结束后等待N秒,执行函数;如果在N这个时间范围内 多次触发事件 则从新计时
function debounce(callback, delay) {
let timer = null; // 用于存放计时器id
return function () {
let arg = arguments; // 保存实参
if (timer) { // 之前如果有开启过计时器(之前有任务)
clearTimeout(timer); // 关闭计时器
}
timer = setTimeout(() => { // 到达时间
callback.apply(this, arg); // 执行任务
}, delay);
}
}
节流
核心思想 每隔N秒执行函数;想要知道间隔时间 就需要记录上一次的执行时间
function thottle(callback, wait) {
let prev = 0; // 用于记录上次函数的执行时间
return function () {
let now = Date.now(); // 获得当前时间
if (now - prev >= wait) { // 当当前时间-上次执行时间 大于等于 等待时间 说明到点了
callback.apply(this, arguments); // 执行回调函数
prev = now; // 更新上一次的执行时间
}
}
}
文章来源:https://blog.csdn.net/m0_73358221/article/details/135494775
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!