JS中的防抖与节流

为啥要使用防抖和节流

在触发mousemove、scroll等事件时,会不断的调用绑定在事件上面的回调函数,极大的限制了前端性能;因此我们要防止资源被过渡浪费和恶意点击,我们需要对此类事件进行减少调用次数,因此会用防抖和节流的方式来减少频率。

防抖的定义:在固定时间内,事件只允许被发生一次

简单的防抖函数

当input框输入时,结果会实时查询,也就是当用户每输入一个字符,函数就会被调用一次,如果当用户手速过快时或恶意输入时,会有n个请求,此时数据就会发生抖动。

若我们将在一定的事件内,把input框输入事件合并成为一个,执行的请求会根据设定的时间而发出一次请求,即将这段时间的所有操作只执行一次。

节流的定义把一定时间内的多个事件合为一个执行

简单的节流函数

当鼠标在盒子内移动时,会不停的执行回调函数,就会输出发送请求,所以我们需要处理让鼠标移动时数据不要立刻发送请求

同样,我们需要一个函数在连续操作中按照一定时间间隔只会执行一次回调函数,在频率较高的事件中来节省性能

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1、先看个栗子 在很多网站中都有这样一个功能,在页面显示一个按钮,用于返回页面的顶部,这个按钮只会在页面滚动到一定...
    Mr_Arc阅读 1,500评论 1 0
  • 一、目的:防止函数被无意义高频调用 二、理解: 1、防抖(debounce) 本质:函数在特定的时间内不再被调用后...
    我喂自己带盐阅读 958评论 0 18
  • 在前端开发中,经常会遇到频繁触发某一事件的情况,如 scroll、mousemove、onchange等。这种高频...
    vinoooooo阅读 349评论 0 0
  • 防抖(debounce):一段时间之后才执行某个函数节流(throttle):一段时间之内执行某个函数 防抖(de...
    爱吃猪大肠的赖小姐阅读 251评论 0 1
  • 0. 引入 首先举一个例子: 模拟在输入框输入后做ajax查询请求,没有加入防抖和节流的效果,这里附上完整可执行代...
    年轻人多学点阅读 473评论 0 3