throttle(节流)和debounce(防抖)
防抖和节流都是用来控制频繁调用的问题,但是这两种的应用场景是有区别的。
throttle(节流)
有一个调用周期,在一个很长的时间里分为多段,每一段执行一次。例如onscroll,resize,500ms执行一次
// 使用时间差
function throttle (fun, wait) {
let previous = 0
return function (...args) {
let now = Date.now()
let context = this
if (now - previous > wait) {
fun.apply(context, args)
previous = now
}
}
}
// 使用定时器
function throttle1 (func, wait) {
let timeout
return function (...args) {
let context = this
if (!timeout) {
timeout = setTimeout(function () {
timeout = null
func.apply(context, args)
}, wait)
}
}
}
debounce(防抖)
在一定时间内不调用,只调用一次。例如input事件,停止输入500ms之后再执行。
function debounce (fun, delay) {
let time = null
return function (...args) {
let ctx = this
clearTimeout(time)
time = setTimeout(function () {
fun.apply(ctx, args)
time = null
}, delay)
}
}
throttle(节流)和debounce(防抖)的更多相关文章
- throttle(节流函数) 与 debounce(防抖动函数)理解与实现
我们会对一些触发频率较高的事件进行监听,(如:resize scroll keyup事件) 如果在回调里执行高性能消耗的操作(如反复操作dom, 发起ajax请求等),反复触发时会使得性能消耗提高,浏 ...
- 关于js节流函数throttle和防抖动debounce
废话不多说,直奔主题. 什么是throttle和debounce? 这两个方法的主要目的多是用于性能优化.最常见的应用尝尽就是在通过监听resize.scroll.mouseover等事件时候的性能消 ...
- 深入理解javascript函数进阶系列第三篇——函数节流和函数防抖
前面的话 javascript中的函数大多数情况下都是由用户主动调用触发的,除非是函数本身的实现不合理,否则一般不会遇到跟性能相关的问题.但在一些少数情况下,函数的触发不是由用户直接控制的.在这些场景 ...
- JavaScript函数节流和函数防抖之间的区别
一.概念解释 函数节流和函数防抖,两者都是优化高频率执行js代码的一种手段. 大家大概都知道旧款电视机的工作原理,就是一行行得扫描出色彩到屏幕上,然后组成一张张图片.由于肉眼只能分辨出一定频率的变 ...
- 【javascript】js中的函数节流和函数防抖
一.概念解释 函数节流和函数防抖,两者都是优化高频率执行js代码的一种手段. 大家大概都知道旧款电视机的工作原理,就是一行行得扫描出色彩到屏幕上,然后组成一张张图片.由于肉眼只能分辨出一定频率的变 ...
- 浅谈 Underscore.js 中 _.throttle 和 _.debounce 的差异
Underscore.js是一个很精干的库,压缩后只有5.2KB.它提供了几十种函数式编程的方法,弥补了标准库的不足,大大方便了JavaScript的编程. 本文仅探讨Underscore.js的两个 ...
- 浅谈 Unserscore.js 中 _.throttle 和 _.debounce 的差异
来源:http://blog.coding.net/blog/the-difference-between-throttle-and-debounce-in-underscorejs Unsersco ...
- 函数节流和函数防抖JavaScript实现
函数节流 function throttle(fn, delay = 1000) { let Running = false; return function () { if (Running) { ...
- js前端性能优化之函数节流和函数防抖
前言:针对一些会频繁触发的事件如scroll.resize,如果正常绑定事件处理函数的话,有可能在很短的时间内多次连续触发事件,十分影响性能 节流: 节流:使得一定时间内只触发一次函数. 它和防抖动最 ...
随机推荐
- vlc源码分析(五) 流媒体的音视频同步
vlc播放流媒体时实现音视频同步,简单来说就是发送方发送的RTP包带有时间戳,接收方根据此时间戳不断校正本地时钟,播放音视频时根据本地时钟进行同步播放.首先了解两个概念:stream clock和sy ...
- Linux内存管理-高端内存(二)
在支持MMU的32位处理器平台上,Linux系统中的物理存储空间和虚拟存储空间的地址范围分别都是从0x00000000到0xFFFFFFFF,共4GB,但物理存储空间与虚拟存储空间布局完全不同.Lin ...
- TCP中的三次握手和四次挥手
三次握手:目的是同步连接双方的序列号和确认号 并交换 TCP窗口大小信息. 理论上跟通话一样: a: 你听的到吗? b: 我能听到.只需要两次就可以了,但建立连接阶段不是双向即时通信的,且最终的目的 ...
- Docker安装(yum方式 centos7)
yum install -y yum-utils device-mapper-persistent-data lvm2 yum-config-manager --add-repo http://m ...
- 给网页标签页添加logo
先把logo转换成后缀名是ico的图片,然后在网页头部,也就是<head></head>中间放上<link rel="shortcut icon"ty ...
- nodejs知识点
rss(resident set size):所有内存占用,包括指令区和堆栈. heapTotal:”堆”占用的内存,包括用到的和没用到的. heapUsed:用到的堆的部分. external: V ...
- Docker toolbox换源
一 docker toolbox安装 略.... 阿里云加速器地址 https://jbriwmh3.mirror.aliyuncs.com 二 为docker toolbox更换国内源 docker ...
- IOT大数据大世界大未来,物联网产业大数据应用简析
在物联网时代,面对PB级的数据,企业将难以以一己之力完成基础设施的建设.物联网所产生的大量数据不仅会驱动现在的数据中心发生根本性的变化,同时也会驱动相关企业采用新的大数据策略. 物联网的价值在于数据: ...
- MQTT入门1 -- mosquitto 安装
原文链接:https://www.cnblogs.com/NickQ/p/9247638.html MQTT入门1 -- mosquitto 安装 简介: MQTT(Message Queuing T ...
- 用Python批量下载DACC的MODIS数据
本人初次尝试用Python批量下载DACC的MODIS数据,记下步骤,提醒自己,数据还在下载,成功是否未知,等待结果中...... 若有大佬发现步骤有不对之处,望指出,不胜感激. 1.下载Python ...