闭包是什么
闭包是指那些能够访问自由变量的函数。
指的是一个函数可以访问另外一个函数的作用域中的变量。
常见的做法是在函数中定义另外一个函数,内部函数可以引用外部函数的变量。外部函数中的变量不会被回收
防抖
在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时。 形象理解,防抖即法师释放技能读条,读条时候取消了重新释放技能再次读条
jsexport 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); }; }
jsfunction 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') }
节流
规定在一个单位时间内,只能触发一次函数。如果这个单位时间内触发多次函数,只有一次生效。 形象理解,节流即在游戏中的攻速设定,鼠标按的再快,也只能在一定时间内攻击一下
jsfunction 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来判断