JS的防抖和节流

目录

防抖

搜索框带来的问题

实现的思路

案例

封装防抖函数

节流

滚动条加载带来的问题

实现的思路

案例

封装节流函数


防抖

搜索框带来的问题

需求:根据输入框内容来请求数据




    
    
    
    Document


    
    

上面的代码会带来一个问题:用户每输入一个关键字都会触发

JS的防抖和节流_第1张图片

现在是要求是用户停下来不输入的时候再触发一次,这个时候就需要用到防抖函数了

实现的思路

  1. 事件函数执行,先创建个定时器

  2. 逻辑代码放到定时器

  3. 当函数再次触发,清除定时器

  4. 创建一个新定时器即可

案例

 
 
 
     
     
     
     Document
 
 
     
     
 
 

JS的防抖和节流_第2张图片

封装防抖函数


 
 
     
     
     
     Document
 
 
     
     
 
 

节流

滚动条加载带来的问题

需求:页面滚动时,加载数据列表

 
 
 
     
     
     
     Document
     
 
 
     
 ​      
         

上面的代码会带来一个问题:用户轻轻下拉滚动条,onscroll中的逻辑会触发很多次

JS的防抖和节流_第3张图片

现在是要求是降低触发事件的频率,这个时候就需要用到节流函数了。

实现的思路

  1. 事件函数执行,先判断是否有定时器,有则直接return

  2. 把逻辑代码放到定时器

  3. 定时器执行后,置空定时器变量

  4. 事件函数执行时,再创建一个新的定时器

案例

 
 
 
     
     
     
     Document
     
 
 
     
         

封装节流函数




    
    
    
    Document
    


    

你可能感兴趣的:(javascript,开发语言,ecmascript)