函数节流(throttle)与函数去抖(debounce)
以下场景往往由于事件频繁被触发,因而频繁执行DOM操作、资源加载等重行为,导致UI停顿甚至浏览器崩溃。
- 1. window对象的resize、scroll事件
- 2. 拖拽时的mousemove事件
- 3. 射击游戏中的mousedown、keydown事件
- 4. 文字输入、自动完成的keyup事件
实际上对于window的resize事件,实际需求大多为停止改变大小n毫秒后执行后续处理;而其他事件大多的需求是以一定的频率执行后续处理。针对这两种需求就出现了debounce和throttle两种解决办法。
什么是debounce函数去抖
如果用手指一直按住一个弹簧,它将不会弹起直到你松手为止。
也就是说当调用动作n毫秒后,才会执行该动作,若在这n毫秒内又调用此动作则将重新计算执行时间
简单的实现方式
空闲控制 返回函数连续调用时,空闲时间必须大于或等于 idle,action 才会执行 * @param idle {number} 空闲时间,单位毫秒 * @param action {function} 请求关联函数,实际应用需要调用的函数 * @return {function} 返回客户调用函数 */ debounce(idle,action)
var debounce = function(idle, action){
var last
return function(){var ctx = this, args = argumentsclearTimeout(last)last = setTimeout(function(){action.apply(ctx, args)}, idle)} } 什么是throttle函数节流如果将水龙头拧紧直到水是以水滴的形式流出,那你会发现每隔一段时间,就会有一滴水流出。也就是会说预先设定一个执行周期,当调用动作的时刻大于等于执行周期则执行该动作,然后进入下一个新周期。 简单的实现方式
function _throttle(fn,wait,time){ var previous = null; //记录上一次运行的时间 var timer = null; return function(){ var now = +new Date(); if(!previous) previous = now; //当上一次执行的时间与当前的时间差大于设置的执行间隔时长的话,就主动执行一次 if(now - previous > time){ clearTimeout(timer); fn(); previous = now;// 执行函数后,马上记录当前时间 }else{ clearTimeout(timer); timer = setTimeout(function(){ fn(); },wait); } } } function _log(){ console.log(1) } window.onscroll = _debounce(_log,500,2000)
或者可以这样理解
var canRun = true;
document.getElementById("throttle").onscroll = function(){
if(!canRun){
// 判断是否已空闲,如果在执行中,则直接return
return;
}
canRun = false;
setTimeout(function(){
console.log("函数节流");
canRun = true;
}, 300);
};
转载于:https://www.cnblogs.com/Marinnn/p/9353634.html
函数节流(throttle)与函数去抖(debounce)相关推荐
- JavaScript函数节流(throttle)与函数去抖(debounce)解析与应用举例
概念 函数防抖(debounce): 事件响应函数在一段时间后才会执行,如果在这段时间内再次调用,则重新计算执行时间:当预定时间内没有再次调用该函数,则执行响应逻辑. 函数节流(throttle): ...
- javascript 函数节流 throttle 解决函数被频繁调用、浏览器卡顿的问题
* 使用setTimeout index.html <html> <head><meta charset="UTF-8"><title&g ...
- SAP UI5和Angular的函数防抖(Debounce)和函数节流(Throttle)实现原理介绍
这是Jerry 2021年的第 11 篇文章,也是汪子熙公众号总共第 282 篇原创文章. Jerry之前的文章 SAP UI5 OData谣言粉碎机:极短时间内发送两个Odata request, ...
- 函数防抖Debounce和函数节流Throttle
函数节流 & 函数防抖 函数节流和函数防抖 函数节流和函数防抖二者很容易被混淆起来.下面贴英文原文,建议认真阅读: Debouncing enforces that a function no ...
- Arduino 项目笔记|旋转鞋柜#按钮去抖Debounce#电机#压力传感器
一.轻触按键开关 零基础入门学用Arduino-基础知识篇-13 数字输入1 - 按键开关 零基础入门学用Arduino-基础知识篇-14 数字输入2 - 按键开关控制电路与程序 按键开关是一种功能性 ...
- JavaScript 函数节流 throttle 和防抖 debounce
今天和别人聊到JavaScript函数的节流和防抖,发现自己对这两个的区别很是模糊,遂小小实践一下,在此记录,希望对需要的人有所帮助. 节流 - 频繁操作,间隔一定时间去做一件事 举例说明:假定时间间 ...
- SAP UI5函数节流(Throttle)的一个最简单的例子
SAP UI5源代码: <!DOCTYPE html> <html> <head><meta http-equiv="X-UA-Compatible ...
- js onscroll android,JavaScript触发onScroll事件的函数节流详解
问题描述 常见的网站布局,顶部一个导航栏,我们假设本页面共有四个栏目:分别为A.B.C.D,我们点击A,锚点跳转至A栏目,同时顶部的A按钮高亮:点击B,锚点跳转至B栏目,同时顶部的B按钮高亮:我们在M ...
- 函数去抖(debounce) 函数节流(throttle)总结
1. 什么是函数去抖 & 函数节流 debounce使用场景 throttle使用场景 2. 实现方法&应用 a. 简单实现 debounce throttle b. 附:Lodash ...
- 函数防抖(debounce)和节流(throttle)以及lodash的debounce源码赏析
函数节流和去抖的出现场景,一般都伴随着客户端 DOM 的事件监听.比如scroll resize等事件,这些事件在某些场景触发非常频繁. 比如,实现一个原生的拖拽功能(不能用 H5 Drag& ...
最新文章
- VS2005 制作安装程序的一些网络教程
- JavaCC首页、文档和下载 - 语法分析生成器 - 开源中国社区
- P7116-[NOIP2020]微信步数【数学】
- python怎么保存为nii文件_Ubuntu+python将nii图像保存成png格式
- mongodb 下载地址,mongodb.dll 下载
- db2中TRANSLATE函数可以实现简单的正则(不属于真正的正则表达式)
- PAT甲级1005 字符串的处理
- Sql Server实现自动增长
- 新系统软件著作权申请详细步骤
- 初步学习CRM的感想
- 2021 BNU Winter Training 9 (2020CCPC东北四省赛)
- 指针进阶:函数指针的应用场景
- 机器学习分类光谱数据
- 《三国演义》之人物出场统计
- Tesseract训练识别数字
- Misc 图片中的图片
- MOSFET与MOSFET驱动电路原理及应用
- 推荐14个牛逼的代码编辑网站
- 2023最火批量getshell工具
- 【esp8266、arduino串口传递浊度、温度数据(json)】