闭包(防抖，节流)

最新推荐文章于 2023-10-06 23:56:19 发布

码农罢了

最新推荐文章于 2023-10-06 23:56:19 发布

阅读量89

点赞数

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

本文链接：https://blog.csdn.net/canxiaoL/article/details/125723747

版权

js 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

闭包概念的官网地址：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)
         }
     }
 },