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 ...
随机推荐
- 前端面试之JavaScript中的闭包!
前端面试之JavaScript中的闭包! 闭包 闭包( closure )指有权访问另一个函数作用域中变量的函数. ----- JavaScript 高级程序设计 闭包其实可以理解为是一个函数 简单理 ...
- Bitter.Core系列九:Bitter ORM NETCORE ORM 全网最粗暴简单易用高性能的 NETCore 之 WITH 子句支持
有时我们在聚合查询中,经常会有复杂的聚联查询.有时表的聚联查询SQL 子句比较复杂,DBA 会经常告诉们,能否通过WITH 子句优化.WITH 子句,是对SQL 聚联查询的优化.Bitter.Core ...
- 命名规范 api-guidelines api规范
https://weui.io weui.css .weui-cell_select-before .weui-cell__bd:after{ display:none; } .weui-cell_s ...
- POJ2961_kmp
Period Time Limit: 3000MS Memory Limit: 30000KB 64bit IO Format: %I64d & %I64u Submit Status ...
- 六:SpringBoot-引入JdbcTemplate,和多数据源配置
SpringBoot-引入JdbcTemplate,和多数据源配置 1.JdbcTemplate对象 1.1 JdbcTemplate核心方法 2.SpringBoot中使用JDBCTemplate ...
- Spark-1.6.1 Hadoop-2.6.4 VMware Ubuntu 分布式集群搭建 全过程
本文从头开始零基础完全配置,适合小白. 本文在vmware中配置三台虚拟机,一台做Master,两台Worker,hadoop 和spark只需要在Master上配置,然后cp到worker上,包括配 ...
- linux c驴杂记
C语言标准库中包含了各种用于处理错误的函数和宏.1.assert( ) 宏 #include<assert.h>void assert( int expression );可用于诊断程序b ...
- centos安装、升级新火狐最新版 31
1.登录火狐主页 下载最新版本firefox-31.0.tar.bz2 解压: tar -jxvf firefox-31.0.tar.bz2 2.然后把旧版本的firefox卸掉 # yum eras ...
- IP路由__动态路由
1.使用协议来查找网络并更新路由表的配置,就是动态路由.它比使用静态或默认路由方便,但它需要一定的路由器CPU处理时间和网络链接带宽.路由协议定义了路由器与相邻路由器通信时所使用的一组规则. 在互联网 ...
- docker(1)下载安装for mac
前言 Docker 提供轻量的虚拟化,你能够从Docker获得一个额外抽象层,你能够在单台机器上运行多个Docker微容器,而每个微容器里都有一个微服务或独立应用,例如你可以将Tomcat运行在一个D ...