js debounce & throttle All In One
js debounce & throttle All In One
debounce & throttle
js 节流 防抖
debounce 防抖
防抖,是指一个事件触发后在单位时间内,如果发生重复触发了同一事件,则取消上一次的事件,并重新计时️
应用场景:实时搜索框,等待用户输入完成,才发送 ajax 请求;减少不必要的请求次数,提高性能
demo
https://codepen.io/xgqfrms/pen/rNNoroy
// debounce
// 防抖,是指一个事件触发后在单位时间内,如果发生重复触发了同一事件,则取消上一次的事件,并重新计时️
// 应用场景:实时搜索框,等待用户输入完成,才发送 ajax 请求;减少不必要的请求次数,提高性能
const debounce = (func, delay) => {
return function(args) {
const that = this;
func.id && clearTimeout(func.id);
func.id = setTimeout(() => {
func.call(that, args);
}, delay);
};
};
const ajax = e => {
const value = e.target.value || ``;
console.log(`ajax value`, value);
pre.insertAdjacentHTML(`beforeend`, `${value} \n`);
};
const input = document.querySelector(`[data-uid="input"]`);
const inputDebounce = document.querySelector(`[data-uid="inputDebounce"]`);
const pre = document.querySelector(`[data-uid="pre"]`);
const btn = document.querySelector(`[data-uid="btn"]`);
btn.addEventListener(`click`, () => {
input.value = ``;
inputDebounce.value = ``;
pre.innerHTML = ``;
});
input.addEventListener(`input`, ajax);
inputDebounce.addEventListener(`input`, debounce(ajax, 500));
throttle 节流
节流,是指在单位时间内, 只会触发一次事件,如果事件触发后,又重复触发了同一事件,则忽略后面触发的事件,直到第一次事件的计时️结束
应用场景:埋点 ??? 监听滚动事件,比如是否滑到底部自动加载更多,用throttle来判断
demo
https://codepen.io/xgqfrms/pen/yLLGxZv
// throttle
// 节流,是指在单位时间内, 只会触发一次事件,如果事件触发后,又重复触发了同一事件,则忽略后面触发的事件,直到第一次事件的计时️结束
// 应用场景:埋点???
const throttle = (func, delay) => {
let flag = true;
return function(args) {
const that = this;
if(flag) {
flag = false;
func.id = setTimeout(() => {
func.call(that, args);
clearTimeout(func.id);
flag = true;
}, delay);
} else {
// ignore
console.log(`ignore event`);
}
};
};
const ajax = e => {
const value = e.target.value || ``;
console.log(`ajax value`, value);
pre.insertAdjacentHTML(`beforeend`, `${value} \n`);
};
const input = document.querySelector(`[data-uid="input"]`);
const inputThrottle = document.querySelector(`[data-uid="inputThrottle"]`);
const pre = document.querySelector(`[data-uid="pre"]`);
const btn = document.querySelector(`[data-uid="btn"]`);
btn.addEventListener(`click`, () => {
input.value = ``;
inputThrottle.value = ``;
pre.innerHTML = ``;
});
input.addEventListener(`input`, ajax);
inputThrottle.addEventListener(`input`, throttle(ajax, 3000));
debounce / throttling
防抖 / 节流
https://www.npmjs.com/package/throttle-debounce
前端性能优化
白屏/首屏 性能优化
https://www.cnblogs.com/xgqfrms/p/13654839.html#4681503
lodash
https://lodash.com/docs/4.17.15#debounce
https://lodash.com/docs/4.17.15#throttle
_.debounce(func, [wait=0], [options={}])
_.throttle(func, [wait=0], [options={}])
lodash 源码剖析
https://github.com/xgqfrms/lodash/issues/1
underscore 源码剖析
https://github.com/xgqfrms/underscore/issues/1
refs
https://css-tricks.com/the-difference-between-throttling-and-debouncing/
https://css-tricks.com/debouncing-throttling-explained-examples/
https://codeburst.io/throttling-and-debouncing-in-javascript-b01cad5c8edf
https://www.telerik.com/blogs/debouncing-and-throttling-in-javascript
https://github.com/niksy/throttle-debounce#readme
https://blog.bitsrc.io/understanding-throttling-and-debouncing-973131c1ba07
xgqfrms 2012-2020
www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!
js debounce & throttle All In One的更多相关文章
- 关于Js debounce 函数小结
一.前言 以下场景往往由于事件频繁被触发,因而频繁执行DOM操作.资源加载等重行为,导致UI停顿甚至浏览器崩溃. 1. window对象的resize.scroll事件 2. 拖拽时的mousemov ...
- 浅谈 Unserscore.js 中 _.throttle 和 _.debounce 的差异
来源:http://blog.coding.net/blog/the-difference-between-throttle-and-debounce-in-underscorejs Unsersco ...
- [JavaScript] 函数节流(throttle)和函数防抖(debounce)
js 的函数节流(throttle)和函数防抖(debounce)概述 函数防抖(debounce) 一个事件频繁触发,但是我们不想让他触发的这么频繁,于是我们就设置一个定时器让这个事件在 xxx 秒 ...
- 详解防抖函数(debounce)和节流函数(throttle)
本文转自:https://www.jianshu.com/p/f9f6b637fd6c 闭包的典型应用就是函数防抖和节流,本文详细介绍函数防抖和节流的应用场景和实现. 函数防抖(debounce) 函 ...
- 白话debounce和throttle
遇到的问题 在开发过程中会遇到频率很高的事件或者连续的事件,如果不进行性能的优化,就可能会出现页面卡顿的现象,比如: 鼠标事件:mousemove(拖曳)/mouseover(划过)/mouseWhe ...
- -_-#【Better Code】throttle / debounce
浅谈javascript的函数节流 javascript函数的throttle和debounce throttle 疯狂触发事件,固定步调执行 debounce 疯狂触发事件,不会执行 var res ...
- lodash throttle和debounce
https://lodash.com/docs#debounce throttle(又称节流)和debounce(又称防抖)其实都是函数调用频率的控制器 throttle:将一个函数的调用频率限制在一 ...
- throttle和debounce
遇到的问题 在开发过程中会遇到频率很高的事件或者连续的事件,如果不进行性能的优化,就可能会出现页面卡顿的现象,比如: 鼠标事件:mousemove(拖曳)/mouseover(划过)/mouseWhe ...
- js函数防抖、节流实现
防抖 Debounce 函数防抖就是,延迟一段时间再执行函数,如果这段时间内又触发了该函数,则延迟重新计算: // 简单实现 function debounce(fn, wait) { let t r ...
随机推荐
- Windows Server 2012 R2 英文版汉化安装中文语言包教程更改为中文版
是这样的,一台海外的windows机器默认是英文版的,但是特别费劲用起来,就更改为中文版,因为海外的供应商并不提供中文版镜像. 1.首先打开控制面板,找到add language,拉到底就是有中文,很 ...
- C#高级编程第11版 - 第三章 索引
[1]3.1 创建及使用类 1.构造函数:构造函数的名字与类名相同: 使用 new 表达式创建类的对象或者结构(例如int)时,会调用其构造函数.并且通常初始化新对象的数据成员. 除非类是静态的,否则 ...
- postgresql 知识的整理
.example { background-color: rgba(229, 236, 243, 1); color: rgba(0, 0, 0, 1); padding: 0.5em; margin ...
- macro-name replacement-text 宏 调试开关可以使用一个宏来实现 do { } while(0)
C++ 预处理器_w3cschool https://www.w3cschool.cn/cpp/cpp-preprocessor.html C++ 预处理器 预处理器是一些指令,指示编译器在实际编译之 ...
- 分别简述computed和watch的使用场景
computed: 当一个属性受多个属性影响的时候就需要用到computed 最典型的栗子: 购物车商品结算的时候watch: 当一条数据影响多条数据的时候就需要用watch 栗子:搜索数据
- (十四)整合 ClickHouse数据库,实现数据高性能查询分析
整合 ClickHouse数据库,实现数据高性能查询分析 1.ClickHouse简介 1.1 数据分析能力 2.SpringBoot整个ClickHouse 2.1 核心依赖 2.2 配属数据源 2 ...
- Spark高级数据分析——纽约出租车轨迹的空间和时间数据分析
Spark高级数据分析--纽约出租车轨迹的空间和时间数据分析 一.地理空间分析: 二.pom.xml 原文地址:https://www.jianshu.com/p/eb6f3e0c09b5 作者:II ...
- Spark练习之Transformation操作开发
Spark练习之Transformation操作开发 一.map:将集合中的每个元素乘以2 1.1 Java 1.2 Scala 二.filter:过滤出集合中的偶数 2.1 Java 2.2 Sca ...
- JS:replace
JavaScript中replace() 方法如果直接用str.replace("-","!") 只会替换第一个匹配的字符. 而str.replace(/-/g ...
- (8)Linux文件目录结构一览表
1.使用 Linux 时,通过命令行输入 ls -l / 可以看到,在 Linux 根目录(/)下包含很多的子目录(称为一级目录),例如 bin.boot.dev 等.同时,各一级目录下还含有很多子目 ...