JS 防抖和节流以及使用lodash库完成防抖和节流

为什么需要防抖和节流？

都是为了提高项目的性能。

文章目录

• 前言
• 一、什么是防抖？
• 二、什么是节流？
• 三、防抖和节流的区别
• 四、使用lodash库完成防抖和节流 

一、什么是防抖？

防抖：

连着点了好多次，我们想要点击停止后间隔一定的时间 执行一次

一些频繁触发的事件，我们不想让它频繁执行，比如 keyup scroll resize mousemove

不想让它如此频繁，执行停止后间隔一定的时间执行 就用防抖

应用场景： 比如搜索框联想

防抖代码如下：

  
    
    
    
    
  
  
    防抖
  

二、什么是节流?

节流

不论执行的频率有多高 ，我们总是让间隔一定的时间执行一次

一些频繁触发的事件，我们想让它频繁执行，但不想那么的频繁，节制一点

比如 keyup scroll resize mousemove

不想让它如此频繁，执行停止后间隔一定的时间执行 就用防抖

应用场景： 比如拖拽内容

节流代码如下：

  
    
    
    
    
  
  
    节流
  

三、防抖和节流的区别

区别：

防抖：不论执行多少次，我们只让最后一次执行

节流：一段时间内，可以执行多次效果，但是我们人为的降低了执行的频率

四、引入lodash库完成防抖和节流

1.引入库

https://www.lodashjs.com/

2.代码示例

  
    
    
    
    
  
  
    防抖
    节流
  

---