JS:性能优化方案:lodash防抖debounce和节流throttle

简介: JS:性能优化方案:lodash防抖debounce和节流throttle

1、防抖函数

防抖用于减少

数请求次数,对于频繁的请求,只执行这些请求的最后一次。

/**
 * @param {function} func - 执行函数
 * @param {number} wait - 等待时间
 * @return {function}
 */
function debounce(func, wait = 300){
  let timer = null;
  return function(){
    if(timer !== null){
      clearTimeout(timer);
    }
    timer = setTimeout(func.bind(this),wait);
  }
}

应用示例

let scrollHandler = debounce(function(e){
  console.log('scroll')
}, 500)
window.onscroll = scrollHandler

2、节流函数

节流用于减少函数请求次数,与防抖不同,节流是在一段时间执行一次。

/**
 * @param {function} func - 执行函数
 * @param {number} delay - 延迟时间
 * @return {function}
 */
function throttle(func, delay){
  let timer = null
  return function(...arg){
    if(!timer){
      timer = setTimeout(()=>{
        func.apply(this, arg)
        timer = null
      }, delay)
    }
  }
}

使用示例

let scrollHandler = throttle(function(e){
  console.log(e)
}, 500)
window.onscroll = scrollHandler

Vue与lodash

安装

npm i --save lodash

使用方法

// 写法一:
methods: {
    // 注意function 不能省略
  debounceSubmit: debounce(function() {
    this.submit();
  }, 500)
},
// 写法二:
created(){
  this.debounceSubmit = debounce(this.submit, 500);
}

参考

10个非常实用的JS工具函数

vue , debounce 使用

相关文章
|
1月前
|
JavaScript
|
3月前
|
JavaScript 前端开发 UED
|
3月前
|
JavaScript 前端开发
js的节流和防抖
js的节流和防抖
17 0
|
5月前
|
JavaScript
js的节流与防抖
js的节流与防抖
30 0
|
5月前
|
JavaScript UED
JS的节流、防抖
JS的节流、防抖
26 0
|
5月前
|
JavaScript 前端开发
介绍一下js的节流与防抖?
介绍一下js的节流与防抖?
|
7月前
|
JavaScript 前端开发
js防抖和节流?有什么区别?如何实现?
什么是防抖和节流?有什么区别?如何实现?
53 0
|
8月前
|
JavaScript UED
js防抖和节流
防抖(Debounce)和节流(Throttle)是两种常用的优化技术,用于控制函数的执行频率,特别是在处理频繁触发的事件或函数调用时。
|
JavaScript
高效率Js防抖和节流
防抖: 函数 fn 在不再触发事件后,过 delay 秒才会执行,在出发期间从来没有执行过
83 0
|
JavaScript
JS防抖和节流
JS防抖和节流