JavaScript函数防抖动debounce

目录
  • 防抖动简述
  • 防抖应用示例
    • 1.防抖前后示例效果截图
    • 2.防抖示例完整 demo
  • 防抖动的应用场景

防抖动简述

函数防抖动（debounce）：防止在短时间内过于频繁的执行相同的任务。 当短时间内的频繁是不必要的时候，就可以考虑去抖动，避免资源浪费，或造成不好体验。

函数防抖动的原理，主要是利用一次性定时器，延迟任务的执行，在延迟这段时间内， 如果任务再次被触发，则通过 clearTimeout 销毁上一次产生的定时器， 因为定时器的被销毁，之前被延迟执行的任务也会随之被取消执行。 这样就实现了在一定时间内，只执行一次任务。这一次的执行通常是最后一次的触发， 因为此前的触发因为定时器的销毁而被取消了。

多次触发只执行最后一次或许就是和“节流”概念的区别？它两在作用上挺像的，在具体实现上略有不同。 函数防抖（debounce）是短时间内连续多次触发，但只执行最后一次，即是说将多次执行变成了只执行最后一次，执行次数减少。 而节流（throttle）是将短时间的多次执行，变成每隔一段时间执行一次。

防抖应用示例

1.防抖前后示例效果截图

2.防抖示例完整 demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>防抖动 Demo</title>
</head>
<body>
<h1>防抖动 Demo</h1>

<label>
    <span>输入昵称：</span>
    <input oninput="inputChange(event.data)"></input>
</label>

<script>

  let timer = null

  function inputChange (data) {
    // 不做防抖动会频繁触发校验，例如连续的输入两个字可能会触发6-7次，
    // 这种频繁程度可能不是必要的，当频繁不是必要的，那么就是资源的浪费。
    // validatePhone(data)

    // 防抖处理，连续正常的输入同样的两个字，只会触发一次校验任务。
    clearTimeout(timer)
    timer = setTimeout(() => {
      validatePhone(data)
    }, 1000)
  }

  function validatePhone (data) {
    let flag = true
    const regPhone = /^1\d{10}$/
    if (!regPhone.test(data)) {
      flag = false
      console.log('校验内容：' + data + '。手机号不正确，请输入1开头的11位手机号')
    }
    return flag
  }
</script>
</body>
</html>

防抖动的应用场景

当任务在短时间内被频繁执行，而这种频繁不是必要的，或不是想要的，就可以考虑使用防抖。 下面是一些场景例子：

①监听滚动条实现左侧内容和右侧导航关联，滚动条的频繁程度很高， 而这种频繁程度可能不是我们想要的，此时就可以考虑使用防抖。

例如我在 JavaScript实现内容滚动与导航标签互动关联方案中就使用了防抖。

// 监听滚动条
window.addEventListener("scroll", function (e) {
  // 防抖动处理
  clearTimeout(that.timeout)
  this.timeout = setTimeout(() => {
    that.activeNavNode(e)
  }, 100)
});

②表单输入的一些监听事件，例如 oninput 等。

③一些组件库的内容变化监听，例如 el-tree 的 @check-change 事件， 当选择祖先级的选项时，因为包含了选中其子孙项，@check-change 会被频繁触发， 如果这个选项变化关联接口，那么这种频繁可能不是必要的。

下面是一个示例：

    <el-tree
      ref="tree"
      :data="treeData"
      show-checkbox
      @check-change="handleCheckChange">
    </el-tree>
handleCheckChange (data, checked, indeterminate) {
  // 简单的防抖动处理
  clearTimeout(this.timeout)
  this.timeout = setTimeout(() => {
    let checkedKeys = this.$refs.tree.getCheckedKeys()
    // 处理相关业务，例如根据选中的条件，触发接口查询
    // this.$emit('checkChange', checkedKeys.join(';'))
  }, 300)
},

④监听浏览器窗口变化 window.onresize，例如在 echarts 的应用中， 默认浏览器窗口大小改变 echarts 视图布局是不会做响应式改变的， 那么就需要通过监听浏览器窗口大小改变然后去重置 echarts 实现布局的改变。 实践发现，调整一下浏览器窗口大小，会非常多次触发 onresize， 但如果我们也跟着去多次重置 echarts.resize()，这不仅不是必要的， 而且还会造成闪烁频繁，卡顿等不好的体验，以及性能浪费。此时适合用防抖动处理。

下面是一个示例：

// 设备视口大小改变时，重置 echarts
let timer = null
window.onresize = function () {
  // 简单的防抖动处理
  clearTimeout(timer)
  timer = setTimeout(() => {
    console.log(timer)
    chart.resize()
  }, 500)
}

也可以考虑使用闭包的方式，而不必在外面声明 timer，例如这样

// 也可以考虑用闭包的方式
window.onresize = this.debounce(() => {
  chart.resize()
}, 500)

function debounce (fn, delay = 1000) {
  let timer = null
  return () => {
    if (timer) clearTimeout(timer)
    timer = setTimeout(fn, delay)
  }
}

⑤鼠标事件，例如拖拽等的监听等，出于准确性和及时性， 他们的监听响应十分细密，而当这种频繁在业务上可能不是必要的，那么也可以考虑使用防抖动技术。

到此这篇关于JavaScript函数防抖动debounce的文章就介绍到这了,更多相关JS防抖动内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • JavaScript中函数的防抖与节流详解

    JavaScript中函数的防抖与节流详解

    目录 一.函数的节流 1.1定义 1.2解决方法 1.3案例演示 1.3.1 代码演示 1.3.2 运行结果 1.3.3 添加函数节流操作 1.3.4 运行结果 二.函数的防抖 2.1 定义 2.2 解决方法 2.3 案例演示 2.3.1 代码展示 2.3.2 运行结果 2.3.3添加函数防抖操作 2.3.4 运行结果 总结 一.函数的节流 1.1 定义 同时触发多次函数执行,执行的是相同内容,要求只执行第一次请求. 例如scroll事件,鼠标滚动一次触发多次函数执行,只需要执行一次. 1.2

  • javascript的防抖和节流你了解吗

    javascript的防抖和节流你了解吗

    一:为什么需要防抖与节流 防抖和节流都是为了解决短时间内大量触发某函数或者事件而导致的性能问题,比如在 1.用户体验上,触发频率过高导致的响应速度跟不上触发频率,出现延迟,假死,卡顿的现象 2.服务器上:加重服务器压力 二:防抖 防抖是当事件或函数被触发后,延迟n秒后在执行回调,如果在这n秒内事件或函数又被触发,则重新计时,直到n秒内没有触发事件或函数,则执行回调函数 图文解释: (回城的时间就相当于延迟时间,如果在回城的时间内再次触发回城则重新倒计时回城时间) 案例:表单输入框事件 <!DOC

  • JavaScript防抖动与节流处理

    针对一些会频繁触发的事件如scroll.resize,如果正常绑定事件处理函数的话,有可能在很短的时间内多次连续触发事件,十分影响性能. 因此针对这类事件要进行防抖动或者节流处理 防抖动 它的做法是限制下次函数调用之前必须等待的时间间隔.正确实现 debouncing 的方法是将若干个函数调用合成 一次,并在给定时间过去之后仅被调用一次. // 将会包装事件的 debounce 函数 function debounce(fn, delay) { // 维护一个 timer let timer =

  • 通过实例讲解JS如何防抖动

    前言 这道题目经常与事件触发器同时存在,为了考察面试者在一些具体业务流程上(信息流,搜索框输入查询)等,能否综合的考虑实现思路. 题目 在某些信息列表中一般采用瀑布流,滚动一屏时加载相应的数据,请思考如何避免连续下拉时而产生的问题(可能是页面崩溃,也可能是巨卡无比). 一般情况下,如果碰到这样的面试题,防抖动机制,就能很好的解决,这方面最早的应用实践还是Twitter,开发者写了一篇博客,详细的阐述了如何解决这样的问题.那么,说到防抖动,其核心内涵在于延迟处理,也就是将一系列的事件处理程序全部延

  • JavaScript运动框架 解决防抖动问题、悬浮对联（二）

    JavaScript运动框架 解决防抖动问题、悬浮对联（二）

    本文实例是对JavaScript运动框架(一)的应用 scrollTop:有时候网页很长,其高度大于显示器高度,会产生滚动,那么在高度方向上,"滚走"的部分就是scrollTop var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; offsetTop:此属性可以获取元素的上外缘距离最近采用定位父元素内壁的距离,如果父元素中没有采用定位的,则是获取上外边缘距离文档内壁的距离.所谓的定

  • JavaScript深入理解节流与防抖

    目录 一.js防抖和节流 二.为什么滚动scroll.窗口resize等事件需要优化 三.滚动和页面渲染前端性能优化的关系 四.防抖Debounce 1 防抖Debounce情景 2 防抖原理 3 防抖函数简单实现 4 防抖函数的演化过程 ①this event绑定问题 ②立即触发问题 ③返回值问题 ④取消防抖,添加cancel方法 五.节流Throttle 1 节流Throttle情景 2 节流原理 3 节流实现—时间戳和定时器 4 节流函数的演化过程 ①时间戳触发 ②定时器触发 ③结合时间戳

  • JavaScript中防抖和节流的区别及适用场景

    JavaScript中防抖和节流的区别及适用场景

    目录 前言 防抖 例如 代码演示 节流 例如 代码演示 前言 防抖和节流,这个在我们的前端生涯中,这两个名词肯定不陌生,甚至经常被人问起: 两者有什么区别? 分别用于什么场景? ps:这就是高频的面试题了吧! 防抖 防抖是什么呢? 形象的的说就是:防止抖动(防抖函数内心独白:“你就抖动吧!等你不抖动了,我们在进行下一步”) 例如 一个搜索输入框, 用户不停的进行输入(这个时候就是抖动的过程), 等用户输入停止之后,再触发搜索. 代码演示 function debounce(fn, delay =

  • 浅谈JavaScript节流与防抖

    浅谈JavaScript节流与防抖

    目录 节流与防抖 概念: 区别 节流实现 节流函数 防抖实现 防抖函数 防抖升级版 总结 节流与防抖 概念: 区别 节流实现 节流函数 防抖实现 防抖函数 防抖升级版 总结 节流与防抖 背景:当我们频繁去请求资源.接口等其他的时候,就会造成操作Dom频繁,接口压力大等等,性能下降.比如我有时候会每次搜索会猛地敲回车,在网络不很好的时候,点击下一页按钮的时候也会一直点,可能网络不好也可能服务器性能低. 为了避免频繁触发同一事件或请求,这时候就要用到节流和防抖了. what?这是啥?当我第一次听到这

  • 关于JavaScript防抖与节流的区别与实现

    目录 1.防抖 2.节流 3.总结 前言: 作为前端开发中会以下两种需求 (1)搜索需求 搜索的逻辑就是监听用户输入事件,等用户输入完成之后把数据发送给后端,后端返回匹配数据,前端显示数据到页面.如果只要用户输入就发请求,这样会给后端造成请求压力,需要控制请求的频率. (2)页面无限加载数据 页面无限加载数据的逻辑就是监听用户用户滚动事件,在用户滚动的过程中,去请求下一页的数据来显示到页面.,那么只要滚动就去发请求,同样会造成后端请求压力,需要控制请求的频率. 以上两种看起来都是控制请求频率的问

  • JavaScript防抖与节流的实现与注意事项

    JavaScript防抖与节流的实现与注意事项

    目录 概念 实现 测试 注意事项 总结 概念 防抖:点击N次提交按钮,只有最后一次会发出请求.减少无效请求的次数. 节流:每点击一次按钮,都会失效一段时间.降低触发的频率. 实现 /* 防抖 时限内,只有最后一次调用会执行 */ function debounce(func, interval = 0) { let timer; return function () { if (timer) { clearTimeout(timer); } timer = setTimeout(() => {

  • JavaScript的防抖和节流一起来了解下

    JavaScript的防抖和节流一起来了解下

    目录 1.前言 2.函数防抖(debounce) 延迟防抖 前缘防抖 防抖函数实现总结 3.函数节流(throttling) 延迟节流 前缘节流 节流函数实现总结 4.两者区别 5.应用场景 总结 1. 前言 首先来举个例子.百度首页的百度输入框,用户输入的时候,每次输入的信息,我们都能看到百度服务器返回给我们的联想关键字.我们每改动一个字,它就换一次联想词,这是我们肉眼能看到的速度,实际上如果不加以处理,可能已经上服务器发起了好几十次的同一个关键字联想请求了,具体速度依赖于不同的pc等机器上的

  • JavaScript 防抖和节流详解

    目录 防抖 节流 总结 防抖 自动门感应到有人,打开门,并且开始5秒倒计时,在 5 s 内有另外一个人靠近到门,门感应到人,重新5秒倒计时 当事件被触发时,设定一个延迟,若期间事件又被触发,则重新设定延迟,直到延迟结束,执行动作 (防止多次触发) web 应用上面 改变页面大小的统计 滚动页面位置的统计 输入框连续输入的请求次数控制 一开始,点击按钮,console.log('pay money') <body> <button id="btn">click&l

  • JavaScript中防抖和节流的实战应用记录

    JavaScript中防抖和节流的实战应用记录

    目录 前言 为什么我们需要防抖/节流 防抖 节流 总结 前言 你可能会遇到这种的情况,一个站点使用自动填充的文本框,内容的拖拽,效果的滚动.那么,你遇到防抖和截流的概率还是很高的.为了使得这些操作,比如自动填充能够顺畅工作,你需要引入防抖和截流功能. 防抖 -> Debounce 节流 -> Throttle 为什么我们需要防抖/节流 开篇已经简单提了,debounce/throttle 能让你的站点表现更优异.它们工作原理是通过减少动作发起的次数.我们简单举个例子,自动填充文本框触发接口请求

  • JavaScript防抖与节流详解

    目录 防抖debounce 节流throttle 总结 防抖debounce 定义:对于短时间内连续触发的事件,比如滚动事件,防抖就是让某个时间期限内,事件处理函数只执行一次. 关于防抖,拿手指按压弹簧举例,用手指按压弹簧,一直按住,弹簧将不会弹起直到松开手指. 举例resize: function debounce(fn, wait){ var timer = null; return ()=>{ if(timer !== null){ clearTimeout(timer); } timer

随机推荐