闭包适用场景篇_什么情况下使用闭包

闭包适用场景篇_什么情况下使用闭包闭包的适用场景​ 应用场景一:典型应用是模块封装,在各模块规范出现之前,都是用这样的方式防止变量污染全局

闭包适用场景篇_什么情况下使用闭包"

闭包的适用场景

应用场景一: 典型应用是模块封装,在各模块规范出现之前,都是用这样的方式防止变量污染全局。
应用场景二: 在循环中创建闭包,防止取到意外的值。
应用场景三:函数防抖 ,函数节流
  • 按钮提交场景:防止多次提交按钮,只执行最后提交的一次

  • 搜索框联想场景:防止联想发送请求,只发送最后一次输入

节流适用场景

  • 轮播图

  • 拖拽场景:固定时间内只执行一次,防止超高频次触发位置变动

  • 缩放场景:监控浏览器resize

区别:节流不管事件触发多频繁保证在一定时间内一定会执行一次函数。防抖是只在最后一次事件触发后才会执行一次函数

封装过的node中间件

  • 如记录日志、ip过滤、查询字符串、请求体解析、Cookie处理、权限验证、参数验证、异常处理等

引用代码

https://juejin.im/post/6844903871475613704

节流防抖代码 简单实现

var timer; // 定时器
function change (e) { 
   
    if (timer) { 
   
        clearTimeout(timer);
    }
    timer = setTimeout(function () { 
   
        console.log(e.target.value);
        timer = void 0;
    }, 1000)
}
document.querySelector("#test")
.addEventListener('keyup', change);

封装公共方法

function keyup (e) { 
   
    console.log(e.target.value);
}

function debounce (method, delay) { 
   
    var timer = void 0;
    return function () { 
   
        var self = this;
        var args = arguments;
        timer && clearTimeout(timer);
        timer = setTimeout(function () { 
   
            method.apply(self, args)
            timer = void 0;
        }, delay)
    }
}
document.querySelector("#test")
.addEventListener('keyup', debounce(keyup, 1000));

节流

var start, timer, wait = 200
function scroll() { 
   
    var self = this;
    var args = arguments;
    if (!start) { 
   
        //第一次触发,设置start时间
        start = Date.now()
    }
    // 当前时间减去开始时间大于
    // 等于设定的周期则执行并且初始化start、timer
    if (Date.now() - start >= wait) { 
   
        console.log('触发了')
        start = timer = void 0;
    } else { 
   
        timer && clearTimeout(timer)
        timer = setTimeout(function () { 
   
            scroll.apply(self, arguments)
        },wait)
    }
}
document.addEventListener('scroll', scroll)

封装

function throttling (method, wait) { 
   
    var start, timer
    return function run () { 
   
        var self = this;
        var args = arguments;
        if (!start) { 
   
            start = Date.now();
        }
        if (Date.now() - start >= wait) { 
   
            method.apply(self, args)
            start = timer = void 0
        } else { 
   
            timer && clearTimeout(timer)
            timer = setTimeout(function () { 
   
                run.apply(self, args)
            }, wait)
        }
    }
}
function scroll() { 
   
    console.log('触发了')
}
document.addEventListener('scroll'
, throttling(scroll, 200))

今天的文章闭包适用场景篇_什么情况下使用闭包分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/77213.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注