如何实现防抖和节流，以及他们的使用场景是什么？

最新推荐文章于 2022-11-08 14:01:47 发布
最新推荐文章于 2022-11-08 14:01:47 发布
阅读量472 收藏 2
点赞数 2
分类专栏： js 文章标签： vue.js js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46052938/article/details/116150218
版权
本文探讨了防抖(debounce)和节流(throttle)的概念，防抖用于防止短时间内频繁触发事件，如登录、发短信和窗口大小调整，而节流则限制单位时间内事件的触发次数，常见于scroll事件、播放事件和input框实时搜索。文章还提供了防抖和节流的代码实现，并指出在Vue组件中使用时应注意防抖/节流函数的声明方式以正确访问vue实例。
摘要由CSDN通过智能技术生成

防抖（debounce）

防抖：防止抖动，单位时间内时间触发会被重置，避免事件被误伤触发多次。代码的实现重在清零clearTimeout

防抖场景：

1.登录，发短信，提交等按钮避免用户点击过快，以至于发送了多次请求，需要防抖

2.调整浏览器窗口大小时，resize次数过于频繁，造成计算过多，此时需要一步到位，就用到了防抖

3.文本编辑实时保存，当无任何更改操作一秒后进行保存

 

节流（throttle）

节流：控制流量，单位时间内事件只能触发一次，若这个单位时间内触发多次函数，只有一次生效。如果服务器端的限流即 Rate Limit。代码实现重在 开锁关锁 timer=timeout; timer=null

节流场景：

1. scroll 事件，每隔一秒计算一次位置信息等

2. 浏览器播放事件，每个一秒计算一次进度信息等

3. input 框实时搜索并发送请求展示下拉列表，每隔一秒发送一次请求 (也可做防抖)

代码的实现：

防抖：设置一个定时器，通过闭包，抓住定时器变量，控制定时器的添加和删除

节流：通过一个布尔变量作为状态，判断代码是否需要执行

第一步：在utils工具文件夹下建一个utils.js文件 


                

        

        

    




        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  jiajia_Chen
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    2
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    2
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
防抖与节流的实现思路及应用场景

				
			

			

				

					m0_58447769的博客
				

				

					10-25
					
					538
					
				

			

		

		

			
				
防抖

防抖策略（debounce）是当事件被触发后，延迟 n 秒后再执行回调，如果在这 n 秒内事件又被触发，则重新计时。



好处: 能够保证用户在频繁触发某些事件的时候,不会频繁的执行回调,只会被执行一次



防抖的应用场景

用户在输入框中连续输入一串字符时，可以通过防抖策略，只在输入完后，才执行查询的请求，这样可以有效减少请求次数，节约请求资源；



防抖的实现思路





节流

节流策略（throttle），顾名思义，可以减少一段时间内事件的触发频率。





节流的应用场景
...

			
		

	



                

              
                



	

		

			

				
					
js  防抖 节流

				
			

			

				

					fgwas100的博客
				

				

					07-07
					
					401
					
				

			

		

		

			
				
防抖与节流 都适合什么场景

防抖 防止抖动，以免把一次事件误认为多次，敲键盘就是一个每天都会接触到的防抖操作。

场景：


	登录、发短信等按钮避免用户点击太快，以致于发送了多次请求，需要防抖
	
	
	调整浏览器窗口大小时，resize 次数过于频繁，造成计算过多，此时需要一次到位，就用到了防抖
	
	
	文本编辑器实时保存，当无任何更改操作一秒后进行保存
	
function debounce (f, wait) {

let timer ;

return (...args) => {...

			
		

	



                


  
              

                


	

		

			

				
					
防抖和节流（详细） 使用场景和区别

					
热门推荐

				
			

			

				

					留着鼻涕敲代码
				

				

					10-22
					
					3万+
					
				

			

		

		

			
				
1.防抖 （多次触发  只执行最后一次）
作用： 高频率触发的事件,在指定的单位时间内，只响应最后一次，如果在指定的时间内再次触发，则重新计算时间
防抖类似于英雄联盟回城6秒，如果回城中被打断，再次回城需要再等6秒

实现代码：
<body>
    <input type="text" id="inp">
    <script>
    
        // 1.封装防抖函数
        function debounce(fn, time) {
       

			
		

	





	

		

			

				
					
什么是防抖和节流？有什么区别？如何实现？

				
			

			

				

					海阔天空
				

				

					04-25
					
					3113
					
				

			

		

		

			
				
什么是防抖和节流？有什么区别？如何实现？
节流: n 秒内只运行一次，若在 n 秒内重复触发，只有一次生效
防抖: n 秒后在执行该事件，若在 n 秒内被重复触发，则重新计时
节流
完成节流可以使用时间戳与定时器的写法
使用时间戳写法，事件会立即执行，停止触发后没有办法再次执行
function throttled1(fn, delay = 500) {
let oldtime = Date.now()
return function (…args) {
let newtime = Date.now()
i

			
		

	



		

			
		



	

		

			

				
					
节流、防抖及使用场景

				
			

			

				

					我是一只蘑菇17的博客
				

				

					02-07
					
					1807
					
				

			

		

		

			
				
函数防抖(debounce) 
概念：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。 
//模拟一段ajax请求
function ajax(content) {
    console.log('ajax request ' + content)
}
let i...

			
		

	





	

		

			

				
					
什么是防抖和节流？有什么区别？如何实现及使用场景？

				
			

			

				

					qq_57334853的博客
				

				

					07-22
					
					361
					
				

			

		

		

			
				
防抖和节流常见面试题、有的面试官甚至让手写防抖和节流？其重要性就不必多说了。
一句话概括就是：通过控制事件触发频率达到优化函数执行效率的效果

			
		

	





	

		

			

				
					
js防抖函数和节流函数使用场景和实现区别示例分析

				
			

			

				

					10-15
				

			

		

		

			
				
总的来说，理解和掌握防抖和节流函数的使用场景和实现方式，对于提升JavaScript应用的性能和用户体验具有重要意义。在开发过程中，应根据实际需求选择合适的优化策略，以实现更高效、流畅的交互体验。

			
		

	





	

		

			

				
					
防抖和节流，在很多场景中都会使用到

				
			

			

				

					05-25
				

			

		

		

			
				
防抖和节流是JavaScript中优化性能的重要技术，它们主要用于控制事件处理函数的执行频率，以避免在高频触发的情况下导致不必要的...在实际开发中，根据场景灵活运用防抖和节流，可以显著提升用户体验并减少资源浪费。

			
		

	





	

		

			

				
					
防抖和节流以及应用场景

				
			

			

				

					Z172370921的博客
				

				

					08-27
					
					5465
					
				

			

		

		

			
				
节流与防抖的前提都是某个行为持续地触发，不同之处只要判断是要优化到减少它的执行次数还是只执行一次就行。

			
		

	





	

		

			

				
					
防抖和节流如何实现

				
			

			

				

					weixin_41552521的博客
				

				

					01-13
					
					1646
					
				

			

		

		

			
				
防抖

触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间（思路—每次触发事件时都取消之前的延时调用方法）

/* 防抖 */
    function dou(fn, wait) {
        var time = null;
        return function () {
            clearTimeout(time)
      ...

			
		

	





	

		

			

				
					
防抖和节流（详解） 使用场景和区别

					
最新发布

				
			

			

				

					止于至善
				

				

					11-08
					
					8813
					
				

			

		

		

			
				
防抖策略（debounce）是当事件被触发后，延迟n秒后再执行回调，如果在这n秒内事件又被触发，则重新计时。作用： 高频率触发的事件，在指定的单位时间内，只响应最后一次，如果在指定的时间内再次触发，则重新计算时间。防抖：防止抖动，单位时间内事件触发会被重置，避免事件被误伤触发多次。代码实现重在清零 clearTimeout。防抖可以比作等电梯，只要有一个人进来，就需要再等一会儿。业务场景有避免登录按钮多次点击的重复提交。

			
		

	





	

		

			

				
					
如何实现防抖与节流

				
			

			

				

					qq_48252305的博客
				

				

					07-12
					
					191
					
				

			

		

		

			
				
性能优化的知识

共同点：降频（ 降低函数的调用 ）



场景：

一个功能本身就是要限制被调用的次数。例如用户请求登陆的次数不能太频繁。

一个功能没有必须被频繁调用。

防抖（debounce）



某个时间内不能再次触发，一旦触发，就要重新计时。在这个时间内没有被再次调用，才会真正的执行，

如果一直按，就会一直重新计时

防抖函数分为非立即执行版和立即执行版



简单写法：


hInput () {
      clearTimeout(this.timer)
      console.l

			
		

	





	

		

			

				
					
防抖与节流实现

				
			

			

				

					Wrj6811的博客
				

				

					07-07
					
					1294
					
				

			

		

		

			
				
本文借鉴于https://segmentfault.com/a/1190000018428170

防抖和节流是开发中经常遇到的需求，先看下 定义：

一、防抖

对于短时间内连续触发的事件（比如页面滚动事件），防抖的含义就是让某个时间期限（如1000毫秒）内，事件处理函数只执行一次


function debounce(fn,delay){
    let timer = null //借助闭包
    return function() {
        if(timer){
          .

			
		

	





	

		

			

				
					
防抖与节流的实现

				
			

			

				

					huoren_no1的博客
				

				

					08-29
					
					390
					
				

			

		

		

			
				
概念


防抖：

在一定时间内持续触发事件，只执行一次



节流：

持续触发事件，每间隔一定时间执行一次



作用

一些高频事件（如：滚动页面、缩放窗口、鼠标移动等）的触发会带来性能问题，防抖或节流就是为了解决这种问题



代码实现
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>防抖与节流</title>
  <style>
  

			
		

	





	

		

			

				
					
防抖和节流的实现

				
			

			

				

					GoldenaArcher的博客
				

				

					05-16
					
					1699
					
				

			

		

		

			
				
防抖和节流的实现
有两种实现，第一个使用 lodash 完成，第二个自己写一个防抖/节流的操作。
本质上来说防抖和节流都是为了提升表现性能的一种方式，在前端还是属于很常见的案例。
如果没有实现防抖或节流，那么输入基本上是这样的：

如果每一次输入都会引发一次 API 调用，对于服务器的压力就会非常大。
案例中使用的是 React 进行页面渲染。
防抖(debounce)
防抖指的是让延迟事件的执行操作，如果该事件被重新触发，则延迟重置。应用案例包括不限于：搜索功能，自动保存等。
debounce - Lod

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值