函数的防抖和节流（手写代码）

最新推荐文章于 2024-08-25 13:14:30 发布

森林中的小蚂蚁

最新推荐文章于 2024-08-25 13:14:30 发布

阅读量432

点赞数

文章标签：前端 javascript css

本文链接：https://blog.csdn.net/weixin_68983685/article/details/125953900

版权

本文介绍了函数防抖和节流的概念及作用，它们是性能优化的重要手段。防抖函数确保在高频事件结束后的一段时间内仅执行一次，而节流函数则在事件触发的一定时间内执行。适用场景包括：窗口的resize、scroll事件，拖拽时的mousemove事件，自动完成的keyup事件等。同时，文章提供了防抖和节流的代码封装示例。

摘要由CSDN通过智能技术生成

**函数的防抖和节流： **

作用：
函数防抖和节流都是在高频事件中防止函数被多次调用，是一种性能优化的方案。
区别在与：
防抖函数只会在高频事件结束后一定时间后调用一次的函数
节流函数会在高频事件触发过程中一定时间内调用的函数

应用场景
比如：应用于window对象的resize 、scroll事件，拖拽时的mousemove 事件
文字的输入。自动完成的keyup事件

防抖的应用场景

scroll 事件滚动触发事件接口， 表单验证 、按钮的提交事件、浏览器的缩放
 搜索框输入查询，如果用户一直输入中，没有必要不停的调用去请求服务器，
 等用户亭子输入的时候，在调用，设置一个合适的时间间隔，有效的减轻服务端压力。

节流的应用场景

DOM元素的拖拽功能实现（mousemove）
计算鼠标的移动
监听滚动事件判断是否页面底部自动加载更多

封装防抖和节流代码

<head>
  <style>
    div {
   
      height: 150px;
      line-height: 150px;
      text-align: center;
      color: #fff;
      background-color: skyblue