国内酷炫网站,口碑营销名词解释,湖南门户网站设计公司,温州网站建设技术托管我们用两张图表示什么是节流和防抖。防抖节流由图可见#xff0c;防抖的意思是#xff0c;当用户在一段时间内连续频繁的试图执行一个函数的时候#xff0c;只有最后一次#xff0c;函数被真正的执行。节流的意思是#xff0c;当用户在某一个时刻执行了一次函数的时候防抖的意思是当用户在一段时间内连续频繁的试图执行一个函数的时候只有最后一次函数被真正的执行。节流的意思是当用户在某一个时刻执行了一次函数的时候在一段时间 t 内再次执行该函数都没有作用。下面我们用实例写一个防抖和节流出来。请先利用下面的命令安装 jquery在项目根目录下执行。npm install jquery -save在 body 里添加button idbtn1btn1/button一、防抖 let id;$(#btn1).on(click,function(e){clearTimeout(id);id setTimeout(function(){console.log(button clicked,id)},1000);})
这是一个最简单的防抖但是缺点是明显的一个临时变量被放在 window 对象里面了污染了全局变量空间。因此我们想把这个变量写成局部的有经验的同学一定知道我们该用闭包了既使用柯理化函数的编程思想。事实上上面的这个例子已经是一个闭包了因为最外层的 id 接住了函数内部 setTimeout 的返回值因此这个函数的栈内存是不会销毁的。只是我们的优化方案需要在此基础上再加一层。本着这个思路我们有 function debounce(){let id;return function(){clearTimeout(id);id setTimeout(function(){console.log(button clicked,id)},1000);}}var fn debounce();$(#btn1).on(click,function(e){fn();})
首先一个全局变量 fn 接住了 debounce 的一个返回值闭包形成debounce 内部的 id 被保存住因此每次 fn 执行的时候它所用到的 id 都是一个这和第一个例子当中全局作用域上面的 id 是等价的只不过不会污染全局作用域。防抖的原理是如果用户频繁的点击按钮上一次的 setTimeout 都会立刻被下一次清除需要执行的函数始终打不出来只有最后一次没人清除它因此会被执行。二、节流下面我们讲节流首先我们还是利用全局作用域写一个简单的版本。 let time new Date();$(#btn1).on(click, function (e) {let time1 new Date();if (time1 - time 2000) {console.log(time1 - time);time time1;}})
同样的这套方法污染了全局作用域因此我们需要写个闭包出来保存局部变量。 function throttle() {let time new Date();return function () {let time1 new Date();if (time1 - time 2000) {console.log(time1 - time);time time1;}}}let fn throttle();$(#btn1).on(click, function (e) {fn();})
节流的原理比防抖更简单当函数被成功的执行过一次本次成功执行的时间会被记录下来那么当用户频繁点击按钮的时候这些次记录的时间距离上次成功执行的时间太短小于阈值因此不被执行。请各位同学一定要把代码搞到本地跑一遍这样才能加深印象。
