防抖和节流都是用来控制频繁调用的问题,但是这两种的应用场景是有区别的。

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(防抖)的更多相关文章

  1. throttle(节流函数) 与 debounce(防抖动函数)理解与实现

    我们会对一些触发频率较高的事件进行监听,(如:resize scroll keyup事件) 如果在回调里执行高性能消耗的操作(如反复操作dom, 发起ajax请求等),反复触发时会使得性能消耗提高,浏 ...

  2. 关于js节流函数throttle和防抖动debounce

    废话不多说,直奔主题. 什么是throttle和debounce? 这两个方法的主要目的多是用于性能优化.最常见的应用尝尽就是在通过监听resize.scroll.mouseover等事件时候的性能消 ...

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

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

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

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

  5. 【javascript】js中的函数节流和函数防抖

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

  6. 浅谈 Underscore.js 中 _.throttle 和 _.debounce 的差异

    Underscore.js是一个很精干的库,压缩后只有5.2KB.它提供了几十种函数式编程的方法,弥补了标准库的不足,大大方便了JavaScript的编程. 本文仅探讨Underscore.js的两个 ...

  7. 浅谈 Unserscore.js 中 _.throttle 和 _.debounce 的差异

    来源:http://blog.coding.net/blog/the-difference-between-throttle-and-debounce-in-underscorejs Unsersco ...

  8. 函数节流和函数防抖JavaScript实现

    函数节流 function throttle(fn, delay = 1000) { let Running = false; return function () { if (Running) { ...

  9. js前端性能优化之函数节流和函数防抖

    前言:针对一些会频繁触发的事件如scroll.resize,如果正常绑定事件处理函数的话,有可能在很短的时间内多次连续触发事件,十分影响性能 节流: 节流:使得一定时间内只触发一次函数. 它和防抖动最 ...

随机推荐

  1. JDK(五)JDK1.8源码分析【集合】HashMap

    本文转载自无始无终,原文连接 HashMap 在 JDK 1.8 后新增的红黑树结构 传统 HashMap 的缺点 JDK 1.8 以前 HashMap 的实现是 数组+链表,即使哈希函数取得再好,也 ...

  2. HeapAnalyzer分析工具

    HeapAnalyzer分析工具 由于jvisualvm或jmap生成的dump文件太大,常常需要用到dump文件分析工具对dump文件进行分析.HeapAnalyzer通过分析heapdump文件, ...

  3. 指纹协查统计sql

     select dic.name, NVL(zc.zc_djzs,0),NVL(zc.zc_shzs,0),NVL(zc.zc_bzzs,0), NVL(zt.zt_djzs,0),NVL(zt.zt ...

  4. Java byte数据转换和处理总结

    一.byte和int相互转换的方法 java程序或Android程序的socket数据传输,都是通过byte数组,但是int类型是4个byte组成的,如何把一个整形int转换成byte数组,同时如何把 ...

  5. git私服

    目录 安装 git 在服务器上部署 Git 1.在服务器上创建一个新用户 2.创建一个git仓库 3.在服务器端打开RSA认证(重要) 4.在客户端创建SSH key 5.把步骤4生成的公钥导入服务器 ...

  6. jquery toggleclass方法

    给元素更改样式,一般使用 addClass() 和removeClass() jquery官方文档 对 addClass的介绍: Adds the specified class(es) to eac ...

  7. angular2jsonp如何跨域请求百度API进行定位

    前提,百度api的申请,不会的可以百度一下,下面是连接 http://lbsyun.baidu.com/index.php?title=webapi/ip-api 1.appMoudle里引入 imp ...

  8. CentOS6安装各种大数据软件 第九章:Hue大数据可视化工具安装和配置

    相关文章链接 CentOS6安装各种大数据软件 第一章:各个软件版本介绍 CentOS6安装各种大数据软件 第二章:Linux各个软件启动命令 CentOS6安装各种大数据软件 第三章:Linux基础 ...

  9. mysql5.7关于使用到OR是否会用到索引并提高查询效率的探讨

    相信很多人在mysql中看到了where条件中使用到了or就会以为这样是不会走索引的,通常会使用union all或者in 来进行优化,事实并不是想象的这样具体问题具体分析. 下面我们来看看 首先我们 ...

  10. docker tar 镜像 容器相互转换

    学习 使用 docker 也有一段时间了 但是在基础去上面有些东西总是容易忘记 整理之前看到的文档,看到一个问题 怎么将一个容器导出成为tar,我本以为是首先 保存成为镜像 再 save 进行保存 查 ...