函数防抖，函数节流

30e8336b8229 发布于2019-08-22 15:37 / 2915人阅读

摘要：函数防抖概念在事件被触发秒后再执行回调，如果在这秒内又被触发，则重新计时。应用场景给按钮加函数防抖防止表单多次提交。对于输入框连续输入进行验证时，用函数防抖能有效减少请求次数。

函数防抖(debounce)

::概念:: 在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。

::实例:: 如果有人进电梯（触发事件），那电梯将在10秒钟后出发（执行事件监听器），这时如果又有人进电梯了（在10秒内再次触发该事件），我们又得等10秒再出发（重新计时）。

应用场景

* 给按钮加函数防抖防止表单多次提交。
* 对于输入框连续输入进行AJAX验证时，用函数防抖能有效减少请求次数。
* 判断scroll是否滑到底部，滚动事件+函数防抖

>  总的来说，适合多次事件一次响应的情况

函数代码

function debounce(fn, wait) {
  let timer = null;
  return function () {
      const context = this
      const args = arguments
      if (timer) {
          clearTimeout(timer);
          timer = null;
      }
      timer = setTimeout(function () {
          fn.apply(context, args)
      }, wait)
  }
}

var fn = function () {
  console.log("boom")
}
// 滚动停止时候执行
window.onscroll = debounce(fn, 500)

函数节流(throttle)

::概念:: 规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。

::实例:: 我们知道目前的一种说法是当 1 秒内连续播放 24 张以上的图片时，在人眼的视觉中就会形成一个连贯的动画，所以在电影的播放（以前是，现在不知道）中基本是以每秒 24 张的速度播放的，为什么不 100 张或更多是因为 24 张就可以满足人类视觉需求的时候，100 张就会显得很浪费资源。

应用场景

* 游戏中的刷新率
* DOM元素拖拽
* Canvas画笔功能
 * DOM 元素的拖拽功能实现（mousemove）
 * 射击游戏的 mousedown/keydown 事件（单位时间只能发射一颗子弹）
* 计算鼠标移动的距离（mousemove）
* Canvas 模拟画板功能（mousemove）
* 搜索联想（keyup）
* 监听滚动事件判断是否到页面底部自动加载更多：给 scroll 加了 debounce 后，只有用户停止滚动后，才会判断是否到了页面底部；如果是 throttle 的话，只要页面滚动就会间隔一段时间判断一次

> 总的来说，适合大量事件按时间做平均分配触发。

函数代码

function throttle(fn, gapTime) {
  // 定义上次时间为null
  let _lastTime = null
  return function() {
    // 获取当前时间
    let _nowTime = +new Date()
    // 如果当前时间-上次时间>间隔时间 或 上次时间不存在
    if (_nowTime - _lastTime > gapTime || !_lastTime) {
      // 执行函数
      fn()
      // 重置上次时间为当前时间
      _lastTime = _nowTime
    }
  }
}

let fn = () => {
  console.log("boom")
}

window.onscroll = throttle(fn, 1000)

使用 debounce 和 throttle 以及常见的坑

不止一次地调用 debounce 方法：

// 错误
$(window).on("scroll", function() {
  debounce(doSomething, 300)
})
// 正确
$(window).on("scroll", debounce(doSomething, 200))

GPU云服务器云服务器函数节流 js函数节流 VUE防抖与节流函数中定义函数

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93601.html

彻底弄懂函数防抖和函数节流

摘要：若时间差大于间隔时间，则立刻执行一次函数。不同点函数防抖，在一段连续操作结束后，处理回调，利用和实现。函数防抖关注一定时间连续触发的事件只在最后执行一次，而函数节流侧重于一段时间内只执行一次。原博客地址，欢迎star 函数防抖和节流函数防抖和函数节流：优化高频率执行js代码的一种手段，js中的一些事件如浏览器的resize、scroll，鼠标的mousemove、mouseover...

Mr_houzi 2019-08-26 13:33 评论0 收藏0
初探函数节流和函数防抖—以项目为例(更新es6语法)

摘要：而上述两种方法，就叫做函数的节流和防抖。二函数节流和函数防抖函数节流函数节流函数节流是让这个函数在间隔某一段时间执行一次。在这个项目中，我认为函数节流和函数防抖都能很好的解决问题。一项目需求最近在做一些小的练手代码的时候，碰到了一个很常见的问题，当在搜索框中进行搜索的时候，如果快速输入很多字符的话，搜索框的监听回调函数会执行很多次，如果回调业务较复杂的话，可能会导致页面运行缓慢甚...

赵连江 2019-08-20 17:03 评论0 收藏0
前端进击的巨人（八）：浅谈函数防抖与节流

摘要：隆重请出主角防抖与节流。防抖与节流的异同相同都是防止某一时间段内，函数被频繁调用执行，通过时间频率控制，减少回调函数执行次数，来实现相关性能优化。参考文章分钟理解的节流防抖及使用场景函数防抖和节流 showImg(https://segmentfault.com/img/bVburM8?w=800&h=600); 本篇课题，或许早已是烂大街的解读文章。不过春招系列面试下来，不少伙伴们还...

_Zhao 2019-08-23 15:37 评论0 收藏0
前端优化 —— 函数的节流和防抖

摘要：文件为函数要传入的参数返回事件处理函数添加事件监听节流函数一般用于事件的情况较多，因为这些事件的触发是连续性的，需要在一个时间间隔内只触发一次。 showImg(https://segmentfault.com/img/remote/1460000018998747); 阅读原文前言在前端开发当中我们经常会绑定一些事件触发的某些程序执行，有时这些事件会连续触发，如浏览器窗口 s...

ralap 2019-08-23 12:18 评论0 收藏0
详谈js防抖和节流

摘要：本文会分别介绍什么是防抖和节流，它们的应用场景，和实现方式。防抖和节流都是为了解决短时间内大量触发某函数而导致的性能问题，比如触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象。本文由小芭乐发表 0. 引入首先举一个例子：模拟在输入框输入后做ajax查询请求，没有加入防抖和节流的效果，这里附上完整可执行代码：没有防抖 ...

shevy 2019-08-23 13:54 评论0 收藏0
js 防抖节流 JavaScript

摘要：此时需要采用防抖和节流的方式来减少调用频率，同时不影响原来效果。函数防抖当持续触发事件时，一段时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前就触发了事件，延时重新开始。 js 防抖节流 JavaScript 实际工作中，通过监听某些事件，如scroll事件检测滚动位置，根据滚动位置显示返回顶部按钮；如resize事件，对某些自适应页面调整DOM的渲染；如ke...

int64 2019-08-23 14:48 评论0 收藏0