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);
}

使用示例

1、对用户输入进行防抖处理

<div>
        <input type="text" id="keyword">
</div>
<script>
    function handleInput(e) {
        console.log(this);
        console.log('input:', e.target.value);
    }
    function debounce(func, wait) {
        let timer = null;
        return function (...args) {
            if (timer) {
                clearTimeout(timer);
            }
            timer = setTimeout(func.bind(this, ...args), wait)
        }
    }
    let keyword = document.getElementById('keyword')
    keyword.addEventListener('input', debounce(handleInput, 500))
</script>

在线demo: https://mouday.github.io/front-end-demo/debounce-demo.html


2、对浏览器滚动事件进行节流处理


<div id="container"></div>
<style>
    #container {
        height: 200vh;
    }
</style>
<script>
    function handleScroll() {
        console.log('scrollTop:', document.body.scrollTop);
    }
    function throttle(func, wait) {
        let timer = null;
        return function (...args) {
            if (timer) {
                return;
            }
            timer = setTimeout(() => {
                func.call(this, ...args);
                timer = null;
            }, wait)
        }
    }
    document.addEventListener('scroll', throttle(handleScroll, 500))
</script>

在线demo:https://mouday.github.io/front-end-demo/throttle-demo.html

相关文章
|
1月前
|
JavaScript
JS封装节流函数
JS封装节流函数
25 0
|
1月前
|
Web App开发 JavaScript 前端开发
JavaScript中的性能优化:代码优化技巧与性能分析工具
【4月更文挑战第22天】本文探讨JavaScript性能优化,包括代码优化技巧和性能分析工具。建议避免全局查找、减少DOM操作、使用事件委托、优化循环和异步编程以提升代码效率。推荐使用Chrome DevTools、Lighthouse和jsPerf等工具进行性能检测和优化。持续学习和实践是提升JavaScript应用性能的关键。
|
4天前
|
JavaScript 前端开发 UED
深入理解JavaScript中的节流与防抖技术
理解并合理运用节流与防抖技术,可以帮助我们优化事件处理函数的执行频率,从而提升应用的性能和用户体验。这两种技术通过减少不必要的计算和DOM操作,使得Web应用程序能够更加流畅地运行。 通过掌握防抖和节流的实现原理及应用场景,开发者可以更加灵活地编写高效且性能优化的代码,对于面对高频事件处理时尤其重要。在开发中合理选择使用防抖或节流,将直接影响到应用的响应性和效率。
8 1
|
1月前
|
Web App开发 缓存 监控
JavaScript性能优化策略
以下是 JavaScript 性能优化的关键点:减少内存使用、避免频繁的 DOM 操作、限制作用域、不使用 eval 和 with、事件代理、事件节流和防抖、性能监控工具、使用 Web Worker、缓存计算结果、优化代码逻辑。例如,通过对象池和数组缓存减少创建,使用事件代理减少监听器,以及利用性能工具分析和优化。实际应用中,应根据项目需求选择合适策略。
|
1月前
|
JavaScript 前端开发 UED
js的防抖节流
js的防抖节流
16 1
|
1月前
|
JavaScript 前端开发 UED
js的节流
js的节流
17 0
|
1月前
|
缓存 JavaScript 前端开发
【JavaScript技术专栏】JavaScript性能优化实战
【4月更文挑战第30天】本文探讨了JavaScript性能优化技巧,包括理解性能瓶颈(代码执行、DOM操作、网络请求和逻辑复杂度)和针对性优化。建议避免全局变量、延迟加载、减少循环嵌套及使用事件委托以优化代码执行;减少DOM操作次数、利用虚拟DOM和避免回流重绘优化DOM操作;通过压缩合并资源、使用CDN和按需加载加速网络请求;选择高效算法和合理数据结构降低计算开销。综合运用这些方法能显著提升前端应用性能。
|
1月前
|
测试技术
js_防抖与节流(闭包的使用)
js_防抖与节流(闭包的使用)
28 0
|
1月前
|
JavaScript
|
1月前
|
JavaScript 前端开发
【JavaScript】面试手撕节流
上篇我们讲了防抖,这篇我们就谈谈防抖的好兄弟 -- 节流。这里在老生常谈般的提一下他们两者之间的区别,顺带给读者巩固下。
59 3