闭包的适用场景
应用场景一: 典型应用是模块封装,在各模块规范出现之前,都是用这样的方式防止变量污染全局。
应用场景二: 在循环中创建闭包,防止取到意外的值。
应用场景三:函数防抖 ,函数节流
-
按钮提交场景:防止多次提交按钮,只执行最后提交的一次
-
搜索框联想场景:防止联想发送请求,只发送最后一次输入
节流适用场景
-
轮播图
-
拖拽场景:固定时间内只执行一次,防止超高频次触发位置变动
-
缩放场景:监控浏览器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