函数防抖(debounce)

应用场景

  • 登录、发短信等按钮避免用户点击太快,以致于发送了多次请求,需要防抖
  • 调整浏览器窗口大小时,resize 次数过于频繁,造成计算过多,此时需要一次到位,就用到了防抖
  • 文本编辑器实时保存,当无任何更改操作一秒后进行保存

实现方法,防抖重在清零

    function debounce(f, wait){
let timer
return (...args) => {
clearTimeout(timer)
timer = setTimeout(() => {
f(..args)
}, wait)
}
}

函数节流(throttle)

应用场景

  • scroll事件,每隔一秒计算一次位置信息等
  • 浏览器播放事件,每隔一秒计算一次进度信息等
  • input 框实时搜索并发送请求展示下拉列表,每隔一秒发送一次请求

实现方法,节流重在开关锁

    function throttle(f, wait){
let timer
return (..args) => {
if (timer) { return }
timer = setTimeout(() => {
f(..args)
timer = null
}, wait)
}
}

总结

  • 防抖:防止抖动,单位时间内事件触发会被重置,避免事件被误触发多次。代码重在清零clearTimeout
  • 节流:控制流量,单位时间内事件只能触发一次,如果服务器端的限流即 Rate Limit。代码实现重在开锁关锁timer=timeout;timer=null

Vue函数防抖和函数节流的更多相关文章

  1. JS函数防抖与函数节流

    概念 函数防抖(debounce) 当调用动作过n毫秒后,才会执行该动作,若在这n毫秒内又调用此动作则将重新计算执行时间 函数节流(throttle) 预先设定一个执行周期,当调用动作的时刻大于等于执 ...

  2. 函数防抖VS函数节流

    (1)函数防抖debounce 函数触发停止一段时间后(期间不能再触发 debounce,否则将重新计时),再执行回调函数 机制: 防抖函数主要利用定时器的延迟执行特性,根据是否有定时器在等待执行: ...

  3. 微信小程序之使用函数防抖与函数节流

    函数防抖和函数节流都是老生常谈的问题了.这两种方式都能优化 js 的性能.有些人可能会搞混两个的概念.所以,我以自己的理解,来解释这两个概念的含义.并且列举在小程序中这两个方法的使用. 函数防抖: 英 ...

  4. js中实现函数防抖跟函数节流

    最近刚接触两个新概念函数防抖与函数节流,虽然这些内容网上可以搜到很多,大家都有自己的一套的理解方式,都写得很好, 而自己则想在理解的基础上自己把代码实现一遍,加深印象. 一.函数防抖 假如我们有这样的 ...

  5. js函数防抖和函数节流

    参考链接:https://juejin.im/post/5b651dc15188251aa30c8669 参考链接:https://www.jb51.net/article/158818.htm 在我 ...

  6. 前端常见原生方法的实现(bind,promise,new,extends,深拷贝,函数防抖,函数节流)

    前端原生方法的实现,这里写一下常见的一些实现: 1.bind Function.prototype.bind2 = function (context) { var self = this; retu ...

  7. 函数防抖与函数节流 封装好的debounce和throttle函数

    /** * 空闲控制 返回函数连续调用时,空闲时间必须大于或等于 wait,func 才会执行 * * @param {function} func 传入函数,最后一个参数是额外增加的this对象,. ...

  8. 深入理解javascript函数进阶系列第三篇——函数节流和函数防抖

    前面的话 javascript中的函数大多数情况下都是由用户主动调用触发的,除非是函数本身的实现不合理,否则一般不会遇到跟性能相关的问题.但在一些少数情况下,函数的触发不是由用户直接控制的.在这些场景 ...

  9. JavaScript函数节流和函数防抖之间的区别

    一.概念解释  函数节流和函数防抖,两者都是优化高频率执行js代码的一种手段.  大家大概都知道旧款电视机的工作原理,就是一行行得扫描出色彩到屏幕上,然后组成一张张图片.由于肉眼只能分辨出一定频率的变 ...

随机推荐

  1. 21.10.18 test

    可可大神出题,四款有趣的游戏推荐,第四个好玩/se T1 loopers \(\color{green}{100}\) 考虑钦定 \(a_1,a_i\) 的位置,固定左边一坨,那么剩下的一坨的 \(\ ...

  2. django HTML 数据处理

    一.介绍 dgango  HTML 对 各种数据类型数据的调用展示 的个人工作总结 二.数据处理 1.元祖数据   t1 =('a','b','c',) 示例:    {{ t1.0 }}    {{ ...

  3. AC-DCN ESXi

    传统IT架构中的网络,根据业务需求部署上线以后,如果业务需求发生变动,重新修改相应网络设备(路由器.交换机.防火墙)上的配置是一件非常繁琐的事情.在互联网/移动互联网瞬息万变的业务环境下,网络的高稳定 ...

  4. 使用silky脚手架构建微服务应用

    目录 模板简介 构建独立应用的模板Silky.App.Template 构建模块化应用的模板Silky.Module.Template 开源地址 在线文档 模板简介 使用 dotnet new 命令可 ...

  5. 大白话讲解如何解决HttpServletRequest的请求参数只能读取一次的问题

    大家在开发过程中,可能会遇到对请求参数做下处理的场景,比如读取上送的参数中看调用方上送的系统编号是否是白名单里面的(更多的会用request中获取IP地址判断).需要对请求方上送的参数进行大小写转换或 ...

  6. PTA 7-3 树的遍历 (25分)

    PTA 7-3 树的遍历 (25分) 给定一棵二叉树的后序遍历和中序遍历,请你输出其层序遍历的序列.这里假设键值都是互不相等的正整数. 输入格式: 输入第一行给出一个正整数N(≤30),是二叉树中结点 ...

  7. MyCat读写分离+MySql主从(一主一从)

    数据库一直在项目担当着一位核心的角色,是所有项目结构中的底层,说白了,我们程序员进行项目开发都是在和数据打交道,而数据都是保存在数据库中,如mysql.oracle.postgresql等等,如果一个 ...

  8. 公司项目被扫出来一个Druid未授权访问漏洞

    这不是阿里druid的监控页面吗?接下来查看项目配置 1.在web.xml中有如下配置: <filter> <filter-name>DruidWebStatFilter< ...

  9. python爬取豆瓣电影第一页数据and使用with open() as读写文件

    # _*_ coding : utf-8 _*_ # @Time : 2021/11/2 9:58 # @Author : 秋泊酱 # @File : 获取豆瓣电影第一页 # @Project : 爬 ...

  10. 菜鸡的Java笔记 第十 - java 类与对象

    (局部变量需要初始化,全局变量不初始化系统也会帮忙初始化而局部变量系统不会帮忙初始化)>>>    2.1 类与对象基本概念        在现实生活之中,类指的就是具备某一共性的群 ...