从闭包看作用域

闭包是什么

闭包是指那些能够访问自由变量的函数。
指的是一个函数可以访问另外一个函数的作用域中的变量。
常见的做法是在函数中定义另外一个函数，内部函数可以引用外部函数的变量。外部函数中的变量不会被回收

防抖

在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。 形象理解，防抖即法师释放技能读条，读条时候取消了重新释放技能再次读条

jsCopy
export function debounce(fn, delay) {
  let timer = null;
  return function() {
    let context = this;
    let arg = arguments;
    clearTimeout(timer);
    timer = setTimeout(function() {
      fn.apply(context, arg);
    }, delay);
  };
}

jsCopy
function log(str) {
    console.log(str)
}
function debounce1(fn, interval = 300) {
    let timeout = null;
    return function () {
        clearTimeout(timeout);
        timeout = setTimeout(() => {
            fn.apply(this, arguments);
        }, interval);
    };
}
function debounce2(fn, delay = 200) {
    let timeout;
    return function() {
        timeout && clearTimeout(timeout);
        timeout = setTimeout(fn.bind(this), delay, ...arguments);
    }
}
const fn1=debounce1(log,300)
const fn2=debounce2(log,300)
function test(){
    fn1('sss')
    fn2('sss')
}

节流

规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。 形象理解，节流即在游戏中的攻速设定，鼠标按的再快，也只能在一定时间内攻击一下

jsCopy
function throttle(fn, delay) {
    let previous = 0;
    // 使用闭包返回一个函数并且用到闭包函数外面的变量previous
    return function() {
        let args = arguments;
        let now = new Date();
        if(now - previous > delay) {
            fn.apply(this, args);
            previous = now;
        }
    }
}

应用场景

debounce

search搜索联想，用户在不断输入值时，用防抖来节约请求资源。 window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次

throttle

鼠标不断点击触发，mousedown(单位时间内只触发一次) 监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断

作用域