web项目开发之JS函数防抖与节流示例代码

防抖

经典应用常见: 手风琴效果

引入

没有做防抖的网站:

做了防抖的网站:

 

防抖场景1(鼠标移入)

抖动 : 用户本来不想触发这个交互,但是由于鼠标不小心抖动误触发交互事件。
例子: 想看第五张图片,。不想看2 3 4张。 但是鼠标从第1张滑到第五张时候,不小心放在了2 3 4上面。误触发。

函数防抖 : 用户连续多次触发某个事件,则只执行最后一次。

解决原理: 开启定时器,间隔时间内如果多次触发事件,则每一次都清除上一次定时器。

实例及解决代码:



  
    
    动画-案例《手风琴》
    
  

  
    

防抖场景2(键盘按键)

经典应用场景: 搜索联想词
-开发中, 该功能后端会使用中间件"OpenSearch"或者"Elasticsearch", 后端的逻辑处理会十分高效、快捷.
-此处只是基于前端的角度, 从减少http请求这个方面出发来进行优化




    
    
    
    Document


    
    


函数节流

概念: 解决高频事件带来的性能问题;高频事件: 在页面中,有些事件触发频率非常的高。
例如: 鼠标移动,滚轮事件。

解决原理: 用户连续多次触发事件,指定时间内只会触发一次

实例及解决代码:




    
    
    
    Document
    


    



以上就是web项目开发之JS函数防抖与节流示例代码的详细内容,更多关于web项目JS函数防抖与节流的资料请关注脚本之家其它相关文章!

你可能感兴趣的:(web项目开发之JS函数防抖与节流示例代码)