js 防抖和节流
2018-07-26 10:51
459 查看
防抖和节流
我们在开发的过程中,经常会有这样一种情况,函数被频繁的调用,如果这个函数执行了某些dom操作的话,那么浏览器将会非常耗费性能,从而影响用户体验
防抖
通过设置定时器保证一段时间内事件回调函数只能执行一次的做法在javascript业界有一个专业的术语称谓——防抖!
它的原理其实很简单:1 用闭包实现一个timer变量,用来保存上一次调用函数的定时器id;2 我们不是直接调用函数,而是中间需要一个间隔,如果两次调用之间的时间差小于我们传递的值,那么清空上一次的调用值;3 我们每一次调用的时候都清除一下上一次的调用定时器id,这样就保证了,如果间隔时间小于我们设置的值,那么上一次函数一定不会调用,从而达到了降低调用频率的效果。
function debounce(fn,time){ //设置定时器 let timer; return function(...args){ //清空上一次的定时器 clearTimeout(timer); //获取执行环境的上下文 let context = this; let _arguments = args; timer = setTimeout(()=>{ fn.apply(context,_arguments); },time); }; };
节流
函数节流(throttle):当持续触发事件时,保证一定时间段内只调用一次事件处理函数。
主要有两种方式实现:
方法一:时间差,原理无非就是两次调用之间的时间差小于设置时,那么不调用,反之调用。代码如下:
function ttrottle(fn,time){ //上一次调用时间 let lastInvokeTime = new Date().getTime(); //当前调用时间 let currentInvokeTime; return function(...args){ currentInvokeTime = new Date().getTime(); if(currentInvokeTime - lastInvokeTime <= time)return; let context = this; let _arguments = args; lastInvokeTime = currentInvokeTime; fn.apply(context,_arguments); }; };
方法二:定时器实现,原理就是设置时间间隔,如果达不到时间间隔,就清除上一次调用回调定时器id。代码如下:
function ttrottle(fn,time){ let isNeedInvoke = true; return function(...args){ if(!isNeedInvoke)return; let context = this; let _arguments = args; isNeedInvoke = false; setTimeout(()=>{ fn.apply(context,_arguments); isNeedInvoke = true; },time); }; };阅读更多
相关文章推荐
- js的防抖与节流处理
- [JS]防抖和节流
- [JS]防抖和节流
- js函数节流和防抖
- js中连续触发事件的稀释方法(函数节流、函数防抖、标识变量)
- JS奇淫巧技:防抖函数与节流函数
- 学习JS防抖【节流】
- js函数防抖、节流实现
- JS事件中防抖debounce和节流throttle以及requestAnimationFrame
- js 函数节流
- [转载]函数节流与函数防抖
- 【 js 性能优化】【源码学习】underscore throttle 与 debounce 节流
- js节流函数高级版
- C#.Net下的防抖-Debounce和节流阀-Throttle功能实现
- JavaScript小知识点(二):函数防抖和节流
- JS中的函数节流
- 节流或防抖:控制函数的执行
- 事件节流与防抖
- 节流和防抖
- 节流和防抖的实现