闭包适用场景篇

闭包的适用场景

应用场景一： 典型应用是模块封装，在各模块规范出现之前，都是用这样的方式防止变量污染全局。

应用场景二： 在循环中创建闭包，防止取到意外的值。

应用场景三：函数防抖 ，函数节流

• 按钮提交场景：防止多次提交按钮，只执行最后提交的一次

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

节流适用场景

• 轮播图

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

• 缩放场景：监控浏览器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))