函数防抖(Debounce)

  • 比较好的解释:https://www.jianshu.com/p/3e8e31f99639
  • JavaScript专题之跟着underscore学防抖:https://github.com/mqyqingfeng/Blog/issues/22
  • 其实概念很简单,就两句话:
    第一句:函数执行过一次后,在等待时间内不能再次执行。
    第二句: 在等待时间内触发此函数,则重新计算等待时间。
  • 换句通俗的话说,就是:你尽管触发事件,但是我一定在事件触发n秒后才执行,如果你在一个事件触发的n秒内又触发了这个事件,那我就以新的事件的时间为准,n秒后才执行,总之,就是要等你触发完事件n秒内不再触发事件,我才执行。
  • 如果不理解上面定义,我可以再给大家举个生活例子:
    如果有人进电梯(触发事件),那电梯将在10s出发(执行事件句柄),这时如果又有人进电梯了(在10s内再次触发该事件),我们又得等10s再出发(重新计时)。这个例子很完美的展示了函数防抖的精髓。

函数节流 (Throttle):在某个时间段内,至多执行一次

  • JavaScript专题之跟着 underscore 学节流:https://github.com/mqyqingfeng/Blog/issues/26
  • 如果你持续触发事件,每隔一段时间,只执行一次事件;
    如果某个时间段内,没有触发事件,则不执行。

函数防抖和函数节流的区别是:函数防抖可能会被无限期的延迟。

函数防抖(Debounce)、函数节流 (Throttle)的更多相关文章

  1. 防抖debounce和节流throttle

    大纲 一.出现缘由 二.什么是防抖debounce和节流throttle 三.应用场景 3.1防抖 3.2节流 一.出现缘由 前端开发中,有一部分用户行为会频繁触发事件,而对于DOM操作,资源加载等耗 ...

  2. js 函数的防抖(debounce)与节流(throttle)

    原文:函数防抖和节流: 序言: 我们在平时开发的时候,会有很多场景会频繁触发事件,比如说搜索框实时发请求,onmousemove, resize, onscroll等等,有些时候,我们并不能或者不想频 ...

  3. js 函数的防抖(debounce)与节流(throttle) 带 插件完整解析版 [helpers.js]

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         函数防抖与节流是做什么的?下面进行通俗的讲解. 本文借鉴:h ...

  4. Java版的防抖(debounce)和节流(throttle)

    概念 防抖(debounce) 当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定时间到来之前,又触发了事件,就重新开始延时. 防抖,即如果短时间内大量触发同一事件,都会 ...

  5. 防抖(Debounce)与节流( throttle)区别

    http://www.cnblogs.com/ShadowLoki/p/3712048.html http://blog.csdn.net/tina_ttl/article/details/51830 ...

  6. js 防抖 debounce 与 节流 throttle

    debounce(防抖) 与 throttle(节流) 主要是用于用户交互处理过程中的性能优化.都是为了避免在短时间内重复触发(比如scrollTop等导致的回流.http请求等)导致的资源浪费问题. ...

  7. JavaScript 防抖(debounce)和节流(throttle)

    防抖函数 触发高频事件后,n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间 /** * * @param {*} fn :callback function * @param {* ...

  8. 函数防抖VS函数节流

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

  9. [JavaScript] 函数节流(throttle)和函数防抖(debounce)

    js 的函数节流(throttle)和函数防抖(debounce)概述 函数防抖(debounce) 一个事件频繁触发,但是我们不想让他触发的这么频繁,于是我们就设置一个定时器让这个事件在 xxx 秒 ...

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

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

随机推荐

  1. ubuntu 更改hostname, hosts后没有办法执行sudo 问题

    由于主机名有重复的情况,所有需要更改主机名,遇到几个问题,主机名更改,重启系统以后不能执行sudo,另外也不知道root用户名密码.这个时候陷入了死循环. 网上搜集的办法,都是用sudo 命令去更改, ...

  2. css 实现省略号. text-overflow: ellipsis; 同时设置四个属性才可以.

    这个同时需要. text-overflow  ;  overflow  ;  white-space ; width ;  四个属性才可以. <!DOCTYPE html> <htm ...

  3. 在html5中不支持<table>的cellpadding 和 cellspacing ; 2) 如何用css实现 cellpadding, cellspacing ; 3) tr , th 是 有 border, 没有 padding 的.

    1.初始: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  4. <context:annotation-config/>和<mvc:annotation-driven/>及解决No mapping found for HTTP request with URI [/role/getRole] in DispatcherServlet with name 'springmvc-config'

    1:什么时候使用<context:annotation-config> 当你使用@Autowired,@Required,@Resource,@PostConstruct,@PreDest ...

  5. REST easy with kbmMW #16 – Multiple servers using HTTP.sys transport

    前文写过使用HTTP.sys转输层(TkbmMWHTTPSysServerTransport),实现一个kbmMW应用服务器. 如果在一台服务器上,同时运行多个,基于TkbmMWHTTPSysServ ...

  6. 中国网建提供的SMS短信发送

    一个简单的发送短信的小demo 第一步: 兄弟们,首先你们去中国网建的官网去注册一个账户:网址http://sms.webchinese.cn/reg.shtml 第二步: 注册完成之后会有免费的测试 ...

  7. mxnet 动手学深度学习

    http://zh.gluon.ai/chapter_crashcourse/introduction.html 强化学习(Reinforcement Learning) 如果你真的有兴趣用机器学习开 ...

  8. JAVA基础部分复习(四、抽象类与接口)

    抽象类与接口的定义: package cn.review.day02; /** * 抽象类 * 定义: * 1.抽象类使用关键字abstract修饰 * 2.抽象方法必须定义在抽象类中,抽象方法没有方 ...

  9. 洛谷P1415 拆分数列(dp)

    题目链接:传送门 题目: 题目背景 [为了响应党中央勤节俭.反铺张的精神,题目背景描述故事部分略去^-^] 题目描述 给出一列数字,需要你添加任意多个逗号将其拆成若干个严格递增的数.如果有多组解,则输 ...

  10. 特殊符号 sort_wc_uniq命令 tee_tr_split命令

     *     任意个 任意字符 ?    任意一个字符  #     注释字符   \     转意符   |     管道符  (之前有说过) cut  命令: cut  -d "&quo ...