浅聊函数防抖与节流

海军 等级 1405 0 2
标签:

浅聊函数防抖与节流

防抖(debounce)

所谓防抖,就是指触发事件后 n 秒后才执行函数,如果在 n 秒内又触发了事件,则会重新计算函数执行时间。

防抖类型分为

  1. 非立即执行版
  2. 立即执行版
  3. 合成版本 防抖

防抖应用场景

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

非立即执行版

非立即执行版的意思是触发事件后函数不会立即执行,而是在 n 秒后执行,如果在 n 秒内又触发了事件,则会重新计算函数执行时间。

/**
 * @description: 
 * @param {*} func 触发的事件
 * @param {*} wait 多少时长才执行事件
 * @return {*}
 */
        function debounce(func, wait) {
            let timeout;
            return function(){
                // 获取当前作用域和参数
                const context = this;
                const args = [...arguments] 
                // 如果当前timeout 存在
                // 清空定时器,再次等待wait时间过后再次执行事件
                if(timeout) clearTimeout(timeout)
                // 定时执行 传递进来的事件
                timeout = setTimeout(()=>{
                    func.apply(context,args)
                },wait)  
            }
        }

立即执行版本

立即执行版的意思是触发事件后函数会立即执行,然后 n 秒内不触发事件才能继续执行函数的效果。

function debounce(func,wait) {
  let timeout;
  return function () {
      const context = this;
      const args = [...arguments];
      if (timeout) clearTimeout(timeout);
      const callNow = !timeout;
      timeout = setTimeout(() => {
          timeout = null;
      }, wait)
      if (callNow) func.apply(context, args)
  }
}

代码解析

当 执行 debounce 函数时, 第一次进来时,timeout 为false,所以 callNow 的值 为 true ,那么它会立即执行 func 函数,这时 timeout 的值 为 true , 当 timeout 值为true 时, 会执行 清空定时器,此时 timeout 又为 false 了 , 这时 callNow 又 为 true ,再次执行 func 函数。

一直循环这样的操作:

timeoutfalse 时,会立刻执行 func 函数。

timeouttrue 时,它会执行clearTimeOut ,这时timeout 又为 false, 而 callNow = ! timeout , 就会立刻执行 func 函数了。

合成版本 防抖

通过传递 Boolean 来决定执行哪种版本。

  • true 为立即执行版
  • false 为非立即执行版本

debounce(func,1000,true)

/**
 * @desc 函数防抖
 * @param func 函数
 * @param wait 延迟执行毫秒数
 * @param immediate true 表立即执行,false 表非立即执行
 */
function debounce(func, wait, immediate) {
  let timeout;
  return function () {
    const context = this;
    const args = [...arguments];
    if (timeout) clearTimeout(timeout);
    if (immediate) {
      const callNow = !timeout;
      timeout = setTimeout(() => {
        timeout = null;
      }, wait)
      if (callNow) func.apply(context, args)
    }
    else {
      timeout = setTimeout(() => {
        func.apply(context, args)
      }, wait);
    }
  }
}

节流

所谓节流,就是指连续触发事件但是在 n 秒中只执行一次函数。 节流会稀释函数的执行频率。

节流有两种实现:

  1. 时间戳版本
  2. 定时器版本

节流应用场景

  1. scroll 事件,每隔一秒计算一次位置信息等
  2. 浏览器播放事件,每个一秒计算一次进度信息等
  3. input 输入框在搜索内容时,可以控制多少s 在执行请求,避免多次发起请求,节约性能。

时间戳版本

function throttle(func, wait) {
    var previous = 0;
    return function() {
        let now = Date.now();
        let context = this;
        let args = arguments;
        if (now - previous > wait) {
            func.apply(context, args);
            previous = now;
        }
    }
}

定时器版本

function throttle(func, wait) {
    let timeout;
    return function() {
        let context = this;
        let args = arguments;
        if (!timeout) {
            timeout = setTimeout(() => {
                timeout = null;
                func.apply(context, args)
            }, wait)
        }

    }
}

代码解析

当执行 throttle 函数时,timeout 默认为undefined , 此时,! timeouttrue 时,执行 定时器,并且 将 timeout 为 null,即为false, 再次执行throttle 函数时,!timeout 又为 true ,再次执行定时器。

*通过 timeout 的状态来达到节流的控制 *

总结

  • 防抖: 触发事件后,一定时间后再执行事件,可以立即执行 也可以一定时间再执行

  • 节流: 控制流量,在单位时间内只能请求一次,避免多次触发事件,影响服务器性能。

结语

❤️关注+点赞+收藏+评论+转发❤️,原创不易,鼓励笔者创作更好的文章

关注公众号 前端自学社区,即可获取更多前端高质量文章!

关注后回复关键词“加群”, 即可加入 “前端自学交流群”,共同学习进步。

关注后添加我微信拉你进技术交流群

欢迎关注公众号,更多精彩文章只在公众号推送

参考

https://github.com/mqyqingfeng/Blog/issues/26

收藏
评论区

相关推荐

尤雨溪:TypeScript不会取代JavaScript
近日,Evrone 与 Vue.js 的作者尤雨溪进行了一次访谈,了解他对于无后端与全栈方法、以及 Vue.js 适用场景的看法,还有他本人如何在工作与生活之间取得平衡。 记者: 嗨 Evan,很荣幸你能接受我们的访谈。那就先从一个简单的问题开始:您的全职工作岗位是由 Patreon 资助的,大多数人恐怕都没有这样的机会。您能聊聊怎样在工作与生活之间找到
js的防抖与节流
在进行窗口的resize、scroll,输入框内容校验等操作时,如果事件处理函数调用的频率无限制,会加重浏览器的负担,导致用户体验非常糟糕。 此时我们可以采用debounce(防抖)和throttle(节流)的方式来减少调用频率,同时又不影响实际效果。 函数防抖 函数防抖(debounce):当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才
性能优化之防抖和节流
我的前端学习笔记📒 最近花了点时间把笔记整理到语雀上了,方便童鞋们阅读 我的前端学习笔记📒(https://www.yuque.com/wanggangfeng
Android抖音去水印APP
本文同步发表于我的微信公众号,在微信搜索 OpenCV or Android 即可关注。 前言 微信8.0.0更新以后,大伙玩得不亦乐乎,除了会动的表情,特效的炸弹、烟花等,还有一个亮点就是微信个人状态背景,既可以挂图片,更可以挂视频,给人一种万物皆可短视频的感觉。我也很爱这个功能,但是奈何鄙人才疏学浅,没法制作炫酷的短视频。只能使用去抖音水印工具获取
防抖和节流
防抖 触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次触发,则重新计算事件 思路 每次触发的时候取消之前的延时调用方法,以当下为准 //防抖 function debounce(fn){ let timeout null; return function(){ clearTimeout
浅析Spring boot与Spring cloud 之间的关系
浅析Spring boot与Spring cloud 之间的关系 20180515 18:16:10有些童鞋刚接触这块 ,理解不是很深刻会经常问道这样类似的问题,下面我就简单讲解一下Spring boot与Spring cloud 之间的关系!Spring boot 是 Spring 的一
Vue - 深入浅出 Mixin
什么 mixinmixin, 意为混入。比如去买冰激凌,我先要一点奶油的,再来点香草的。我就可以吃一个奶油香草的冰激凌。如果再加点草莓,我可以同时吃三个口味的冰激凌。 代码表示假设把你已有的奶油味的称为 base,把要添加的味道称为 mixins。用 js 伪代码可以这么来写:const base     hasCreamFlavor()      re
沉寂了一周,我开发了一个聊天室
前言最近一周没有发文章了,我在这里向大家说一声抱歉。今天,我们来从零开始开发一款聊天室。好,我们现在就开始。了解WebSocket开发聊天室,我们需要用到WebSocket这个网络通信协议,那么为什么会用到它呢?我们首先来引用阮一峰大佬的一篇文章一段话: 初次接触 WebSocket 的人,都会问同样的问题:我们已经有了 HTTP 协议,为什么还需要另一个协
JavaScript与Node.js一起打造一款聊天App
聊天是我们人与人交流最直接的方式,互联网的加入使我们交流更加便捷。我们手机上的微信、QQ是我们手机必不可少的应用软件。那么,我们是否可以做一款聊天应用呢? 之前我自己闲着没事,研究过一些技术,做了一款即时通讯应用,下面我将选取几幅具有代表性的图片供大家参考。一、应用示图 以上是这款应用的主要页面,功能可能相对简陋点,不过基本的功能已经实现了,下面我将给出
liunx服务器防火墙开启导致无法远程连接解决方案
前言在使用阿里云服务器的过程中,开启了服务器的防火墙,导致本地xshell以及阿里云官网自带的远程连接【端口:22】均无法使用,所有服务器开启的端口无法使用,在联系阿里云技术客服后,才得到了解决,将整个解决方案总结如下,希望可以帮到那些遇到此类问题的同学。 解决思路1.设置救援连接密码2.进行救援连接(和电脑系统的安全模式启动类似)3.关闭防火墙4.成功解决
浅聊函数防抖与节流
防抖(debounce) 所谓防抖,就是指触发事件后 n 秒后才执行函数,如果在 n 秒内又触发了事件,则会重新计算函数执行时间。 防抖类型分为 1. 非立即执行版 2. 立即执行版 3. 合成版本 防抖 防抖应用场景 登录、发短信等按钮避免用户点击太快,以致于发送了多次请求 调整浏览器窗口大小时,resize 次数过于频繁,造成计算过多,此时需要一次到
10年程序员的编程语言感受与Go的结缘
因为小编最近在写两套教程,分别是Java语言基础教程和Go语言的基础教程,并且这 2 门语言,小编在实际的工作中也都有用过而且 www.helloworld.net 社区的后台,就是用Go语言写的,而且正是小编负责的。况且小编在工作中是用Java的。所以对这两门语言还算比较了解,所以本文对这 2 种语言聊聊小编自己的感受与看法,也顺便聊聊小编这10年来,各种
记录 30 seconds of code 项目个人觉得中有价值的片段或者小技巧(二)
D F 系列 1、防抖函数,限制高频触发jsconst debounce (fn, ms 0) let timeoutId; return function(...args) clearTimeout(timeoutId); timeoutId setTimeout(() fn.apply(this, args), ms);
通过爆料巨量引擎引来逐渐增加的广告主
如今,随着互联网用户规模逐渐逼近天花板,每个企业都面临着业绩、用户等不同程度的增长困境。在这样的背景下,广告主当然更注重精细化运营。为此,很多企业选择了巨量引擎作为交付平台,希望凭借其在技术和数据上的优势,为自己做出更合理的交付决策。那么巨量引擎,有什么优势呢?我们今天就来聊一聊。是什么爆料通过巨量引擎引来逐渐增加的广告主?很多问题都可以在里找到你想要的答案
写了一年golang,来聊聊进程、线程与协程
本文已收录 https://github.com/lkxiaolou/lkxiaolou 欢迎star。 进程在早期的单任务计算机中,用户一次只能提交一个作业,独享系统的全部资源,同时也只能干一件事情。进行计算时不能进行 IO 读写,但 CPU 与 IO 的速度存在巨大差异,一个作业在 CPU 上所花费的时间非常少,大部分时间在等待 IO。为了更合理的利用