化妆品的网站布局设计图片大全,淄博做网站优化公司,值得浏览的国外网站,制作网页站点的具体流程案例今天和别人聊到JavaScript函数的节流和防抖#xff0c;发现自己对这两个的区别很是模糊#xff0c;遂小小实践一下#xff0c;在此记录#xff0c;希望对需要的人有所帮助。 节流 - 频繁操作#xff0c;间隔一定时间去做一件事 举例说明#xff1a;假定时间间隔为 500ms发现自己对这两个的区别很是模糊遂小小实践一下在此记录希望对需要的人有所帮助。 节流 - 频繁操作间隔一定时间去做一件事 举例说明假定时间间隔为 500ms频繁不停的操作 2s且每两次执行时间小于等于时间间隔 500ms那么就会执行 4 次也就是每隔 时间间隔 500ms 执行一次。 防抖 - 频繁操作一定时间间隔内只执行最后一次操作 举例说明假定时间间隔是 500ms频繁不停的操作 5s且每两次执行时间小于等于时间间隔 500ms那么最后只执行了 1 次也就是每一次执行时都结束了上一次的执行。 代码示例 //节流方法 1function throttle1(method, duration){var prevTime new Date();return function () {var context this,currentTime new Date(),resTime currentTime - prevTime;//打印出本次调用方法和上次执行方法的时间差console.log(时间差resTime);//当本次调用距离上次执行方法的时间差大于等于要求时间间隔时执行一次方法if(resTime duration){method.apply(context);//记录执行方法的时间prevTime currentTime;}}}//节流方法 2function throttle2(method, duration){//当前时间间隔内是否有方法在执行或者说方法的调用是否在进行var runningFlag false;return function (e) {// 判断当前是否有方法在执行有则什么都不做if (runningFlag) {return false;}//开始执行runningFlag true;setTimeout(function(){method(e);//执行完毕声明当前没有正在执行的方法方便下一个时间间隔内的调用runningFlag false;}, duration)}}//防抖function debounce(method, duration){var timer null;return function(){var context this,args arguments;//在本次调用之前的一个间隔时间内有方法在执行则终止该方法的执行if(timer){clearTimeout(timer);}//开始执行本次调用timer setTimeout(function(){method.apply(context, args);},duration);}}//模拟三个执行方法function jieliu1(){console.log(节流 1);}function jieliu2(){console.log(节流 2);}function fangdou(){console.log(防抖);}//持续执行时间var totalTime 2000;var jieliuFn1 throttle1(jieliu1,500);var jieliuFn2 throttle2(jieliu2,500);var fangdouFn debounce(fangdou,500);(function(duration){setInterval(function(){if( totalTime 0 ){jieliuFn1();jieliuFn2();fangdouFn();totalTime - duration;}},duration);})(100); 运行结果 时间差 100时间差 201时间差 303时间差 401时间差 504 节流 1时间差 98 节流 2时间差 199时间差 300时间差 396时间差 496时间差 597 节流 1时间差 100 节流 2时间差 203时间差 299时间差 402时间差 500 节流 1时间差 103时间差 204 节流 2时间差 303时间差 400 节流 2 防抖 结论 由以上运行结果可以看出节流1 出现了 3 次节流2 出现了 4 次防抖出现了 1 次。防抖实现顺利但是两个节流方法的执行结果存在差异。观察时间差可以看出每次节流1 执行时时间差并不会都是 500 整也就是说一共调用 2 秒时节流1 并不能做到每隔 500 毫秒执行一次而共执行 4 次第四次执行往往因为前面的 3 次执行的时间误差而导致到达时间 2 秒时最后一次的时间差无法达到 时间间隔 500ms 以上以至于只能执行 3 次。 结论当在一个大范围的时间内比如两小时内每几分钟执行一次超过2小时则不再实行推荐使用第一种节流方式如果仅仅要求间隔一定时间执行一次推荐使用第二种节流方法防止频繁操作比如表单多次提交推荐使用防抖。 如有问题欢迎指正谢谢
