闭包(防抖，节流)

最新推荐文章于 2024-06-07 10:59:46 发布

码农罢了

最新推荐文章于 2024-06-07 10:59:46 发布

阅读量140

点赞数

分类专栏： js 文章标签： javascript 前端 vue.js

本文链接：https://blog.youkuaiyun.com/canxiaoL/article/details/125723747

版权

js 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了JavaScript中的闭包概念，并通过官方文档链接提供了详细解释。重点讨论了闭包在实现防抖和节流技术上的应用，这两种技术常用于优化用户交互如点击事件和搜索输入。给出了原生JS和Vue.js版本的代码示例，帮助理解如何运用闭包来限制事件处理的频率，从而提高性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

闭包概念的官网地址：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Closures
闭包应用：防抖，节流。其他应用场景也许有，但笔者还未见过，希望有大佬能够传授一点小知识。

防抖，点击按钮时单位时间内只可点击一次。
原生JS版本：

function start() {
	var timer = null;
    return function () {
        // 清空上一次操作
        clearTimeout(timer)
        // 3s 之后，任务执行
        timer = setTimeout(function () {
            timer  = null;
        }, 3000)
    }
}
document.onclick = start();

vue版本：

data() {return {timer: null}}
click() {
	var fn = this.start();
    fn()
},
start() {
    return () => {
        // 清空上一次操作
        clearTimeout(this.timer)
        // 3s 之后，任务执行
        this.timer = setTimeout(() => {
            this.timer = null;
        }, 3000)
    }
},

节流，搜索框输入间隔不超过单位时间不会请求搜索。
原生JS版本：

function start() {
     var timer = true;
     return function() {
         if (timer) {
             timer = false;
             // 3s 之后，任务执行
             setTimeout(() => {
                 timer = true;
             }, 3000)
         }
     }
 }
 document.onclick = start();

vue版本：

data() {return {timer: null}}
click() {
	var fn = this.start();
    fn()
},
start() {
     return () => {
         if (this.timer) {
             this.timer = false;
             // 3s 之后，任务执行
             setTimeout(() => {
                 this.timer = true;
             }, 3000)
         }
     }
 },