函数防抖(Debounce)、函数节流 (Throttle)
函数防抖(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)的更多相关文章
- 防抖debounce和节流throttle
大纲 一.出现缘由 二.什么是防抖debounce和节流throttle 三.应用场景 3.1防抖 3.2节流 一.出现缘由 前端开发中,有一部分用户行为会频繁触发事件,而对于DOM操作,资源加载等耗 ...
- js 函数的防抖(debounce)与节流(throttle)
原文:函数防抖和节流: 序言: 我们在平时开发的时候,会有很多场景会频繁触发事件,比如说搜索框实时发请求,onmousemove, resize, onscroll等等,有些时候,我们并不能或者不想频 ...
- js 函数的防抖(debounce)与节流(throttle) 带 插件完整解析版 [helpers.js]
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 函数防抖与节流是做什么的?下面进行通俗的讲解. 本文借鉴:h ...
- Java版的防抖(debounce)和节流(throttle)
概念 防抖(debounce) 当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定时间到来之前,又触发了事件,就重新开始延时. 防抖,即如果短时间内大量触发同一事件,都会 ...
- 防抖(Debounce)与节流( throttle)区别
http://www.cnblogs.com/ShadowLoki/p/3712048.html http://blog.csdn.net/tina_ttl/article/details/51830 ...
- js 防抖 debounce 与 节流 throttle
debounce(防抖) 与 throttle(节流) 主要是用于用户交互处理过程中的性能优化.都是为了避免在短时间内重复触发(比如scrollTop等导致的回流.http请求等)导致的资源浪费问题. ...
- JavaScript 防抖(debounce)和节流(throttle)
防抖函数 触发高频事件后,n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间 /** * * @param {*} fn :callback function * @param {* ...
- 函数防抖VS函数节流
(1)函数防抖debounce 函数触发停止一段时间后(期间不能再触发 debounce,否则将重新计时),再执行回调函数 机制: 防抖函数主要利用定时器的延迟执行特性,根据是否有定时器在等待执行: ...
- [JavaScript] 函数节流(throttle)和函数防抖(debounce)
js 的函数节流(throttle)和函数防抖(debounce)概述 函数防抖(debounce) 一个事件频繁触发,但是我们不想让他触发的这么频繁,于是我们就设置一个定时器让这个事件在 xxx 秒 ...
- JS函数防抖与函数节流
概念 函数防抖(debounce) 当调用动作过n毫秒后,才会执行该动作,若在这n毫秒内又调用此动作则将重新计算执行时间 函数节流(throttle) 预先设定一个执行周期,当调用动作的时刻大于等于执 ...
随机推荐
- softmax与多分类
sotfmax 函数在机器学习和深度学习中有着广泛的应用, 主要用于多分类问题. softmax 函数 1. 定义 假定数组V,那么第i个元素的softmax值为 也就是该元素的指数 除以 所有元素的 ...
- Flask源码阅读-第二篇(flask\__init__.py)
源码: # -*- coding: utf-8 -*-""" flask ~~~~~ A microframework based on Werkzeug. It's e ...
- 深入浅出 - vue变化侦测原理
废话真多!!! 其实在一年前我已经写过一篇关于 vue响应式原理的文章,但是最近我翻开看看发现讲的内容和我现在心里想的有些不太一样,所以我打算重新写一篇更通俗易懂的文章. 我的目标是能让读者读完我写的 ...
- linux下开启oracle服务和开启监听
su - oracle 切换到oracle用户模式下 sqlplus /nolog //登录sqlplus SQL> connect /as sysdba //连接oracle SQL&g ...
- 使用Redis构建支持程序
在Linux和Unix世界中,有两种常见的记录日志的方法.第一种是将日志记录到文件里面,然后随着时间流逝不断地将一个有一个日志行添加到文件里面,并在一段时间之后创建新的日志文件.包括Redis在内的很 ...
- 基于链路的OSPF简单口令认证
实验要求:掌握基于链路的OSPF简单口令认证 拓扑如下: 配置如下: R1enable configure terminal interface s0/0/0ip address 192.168.1. ...
- Python学习笔记第十八周
目录: 一.JavaScript正则表达式 1.test 2.exec 二.BootStrap 1.响应式 2.图标.字体 3.基本使用 三.Django 1.安装 2.创建目录 3.进入 ...
- 如何在Ubuntu/Linux内使用 zip 压缩隐藏文件?
假设你的当前目录结构为: A文件--B文件夹--C文件等 | | D文件夹-E文件 | | 等等文件(含隐藏) 那么在使用zip命令时加上 -r 即可包含整个目录结构和隐藏文件: zip -r B.z ...
- iOS 静态库代码混淆方案
基于开源 Obfuscator-LLVM方案 下载安装最新版本 Obfuscator-LLVM,目前3.6.1 $ git clone -b llvm-3.6.1 https://github.com ...
- 九度OJ1205题-递归求解问题
题目1205:N阶楼梯上楼问题 时间限制:1 秒 内存限制:128 兆 特殊判题:否 提交:5887 解决:2446 题目描述: N阶楼梯上楼问题:一次可以走两阶或一阶,问有多少种上楼方式.(要求采用 ...