废话不多说,直奔主题。

什么是throttle和debounce?

这两个方法的主要目的多是用于性能优化。最常见的应用尝尽就是在通过监听resize、scroll、mouseover等事件时候的性能消耗。拿scroll来说,没有处理时滑动一次滚动条scroll事件会触发多次,如果其中涉及的代码偏重,那么性能消耗肯定是非常大。使用节流和防抖就是去优化这种情况,通过同的使用场景决定使用的对象,接下来就对比一下两者的区别。

throttle

在指定的delay(延迟时间)内,在delay间隔内多次调用,throttle会舍弃中间的所有调用操作,直到用户停止行为后的delay后执行一次预期执行函数。这就称为函数节流。

debounce

跟节流函数一样,debounce也是在设定的delay间隔内多次调用执行函数的话,会舍弃这些操作。和throttle不同的是,debounce多了个强制执行时间参数mustRunDelay,不管前面舍弃了多少次操作,一旦时间tag>=mustRunDelay的话,执行函数一定会被调用一次。接下来上代码,更直观。

原文参考源代码出处

原文对于节流和防抖的描述有待商榷,但是最终的代码其实就是节流和防抖的综合体。通过是否传入mustRunDelay参数来区分。

function throttle (fn, delay, mustRunDelay = 0) {
let timer = null;
let tStart; //创建父级作用域时间tag
return function () {
const context = this;
const args = arguments;
const tCurr = +new Date();//子作用域时间tag
clearTimeout(timer);//每次执行,先清空定时器,这步操作便是delay时间内舍弃多余操作的实现
if (!tStart) { // 首次给时间tag赋值
tStart = tCurr;
}
//这层判断就是判断是否达到强制执行的条件
if (mustRunDelay !== 0 && tCurr - tStart >= mustRunDelay) {
fn.apply(context, args);
tStart = tCurr;
} else {
timer = setTimeout(function () {
fn.apply(context, args);
}, delay);
}
};
}

忽略throttle的方法名,按照调用方式不同,他也可以是debounce。主要实现在于通过异步操作的事件间隔,对于前后两次调用方法打时间tag进行比较,用清空定时器的操作实现多余调用操作的舍弃。还有一点是用了闭包的机制,便于管理tStart变量,因为闭包的关系,tStart内存不会被回收,否则需要在全局定义该变量。

结尾

具体怎么用呢,拿scroll事件举个例子:

window.addEventListenr('scroll',throttle(scrollHandle,delay,mustRunDelay),false);

大概就这意思,使用时候根据场景使用,mustRunDelay>0?防抖:节流。

关于js节流函数throttle和防抖动debounce的更多相关文章

  1. js 节流函数 throttle

    /* * 频率控制 返回函数连续调用时,fn 执行频率限定为每多少时间执行一次 * @param fn {function} 需要调用的函数 * @param delay {number} 延迟时间, ...

  2. Javascript中 节流函数 throttle 与 防抖函数 debounce

    问题的引出 在一些场景往往由于事件频繁被触发,因而频繁地进行DOM操作.资源加载,导致UI停顿甚至浏览器崩溃. 在这样的情况下,我们实际上的需求大多为停止改变大小n毫秒后执行后续处理:而其他事件大多的 ...

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

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

  4. js节流函数和js防止重复提交的N种方法

    应用情景 经典使用情景:js的一些事件,比如:onresize.scroll.mousemove.mousehover等: 还比如:手抖.手误.服务器没有响应之前的重复点击: 这些都是没有意义的,重复 ...

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

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

  6. js节流函数高级版

    节流函数其主要作用就是防止用户在短时间内多次触发该事件. <!DOCTYPE html> <html lang="en"> <head> < ...

  7. 简单的节流函数throttle

    在实际项目中,总会遇到一些函数频繁调用的情况,比如window.resize,mouseover,上传进度类似的触发频率比较高的函数,造成很大的性能损耗,这里可以使用节流函数来进行性能优化,主要是限制 ...

  8. Underscore.js 中 _.throttle 和 _.debounce 的差异

    两个方法都是用来控制事件的频率的,在mousemove,resize等这种高频率触发事件中,控制其响应频率可以明显提高程序的流畅性,减少资源的占用. 通过分析其源代码: _.throttle方法源码 ...

  9. JavaScript 节流函数 Throttle 详解

    在浏览器 DOM 事件里面,有一些事件会随着用户的操作不间断触发.比如:重新调整浏览器窗口大小(resize),浏览器页面滚动(scroll),鼠标移动(mousemove).也就是说用户在触发这些浏 ...

随机推荐

  1. java中FastJson的json类型转换

    JSON Gson: 来自Google,功能全面.快速.简洁.面向对象.数据传递和解析方便. Jackson:来源FasterXML项目,社区活跃,更新快 解析速度和效率比Gson快,但无法按需解析, ...

  2. 使用pycharm编写python乱码

    开始总是乱码,该设置的都设置了,后来用charde检测编码也一直报错,之后重启了pycharm就好了,乱码问题也没了

  3. Stream介绍

    一.Stream介绍 现在有这样的需求:有个菜单list,菜单里面非常多的食物列表,只选取小于400卡路里的并且按照卡路里排序,然后只想知道对应的食物名字. 代码: package com.cy.ja ...

  4. golang 标准库 sync.Map 中 nil 和 expunge 区别

    本文不是 sync.Map 源码详细解读,而是聚焦 entry 的不同状态,特别是 nil 状态和 expunge 状态的区分. entry 是 sync.Map 存放值的结构体,其值有三种,分别为 ...

  5. psp周总结02

      周日 周一 周二 周三 周四 周五 周六 所花时间 180 60 240 180 340 180 培训 代码量 186 65 157 86 200 200 博客量 1 1 了解的知识点 jsp页面 ...

  6. big data env setup

    install Spark on CentOS: https://aodba.com/how-to-install-apache-spark-in-centos-standalone/ https:/ ...

  7. CentOSLinux系统Nginx优化

    Nginx优化 Auther:Rich七哥 Nginx优化一.Nginx隐藏版本号:二.网页缓存.连接超时.网页压缩传输:配置连接超时:3.网页压缩传输:三.访问控制.定义错误页面.自动索引.目录别名 ...

  8. MySQL-快速入门(13)MySQL日志

    1.MySQL的日志.主要分为4类. 1>二进制日志:记录所有更改数据的语句,可以用于数据复制. 2>错误日志:记录MySQL服务的启动.运行.停止MySQL服务时出现的问题. 3> ...

  9. qt QUndoGroup的使用

    最近项目中用到撤销,恢复功能.qt的demo中有一个例子,是类似于单文档的.而我的项目中是类似于多文档的项目,即可能要打开多个页面,不同的页面都有撤销恢复功能.这样的话,就要用到QUndoGroup类 ...

  10. [LeetCode] 116. 填充每个节点的下一个右侧节点指针

    题目链接 : https://leetcode-cn.com/problems/populating-next-right-pointers-in-each-node/ 题目描述: 给定一个完美二叉树 ...