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的更多相关文章

  1. 关于Js debounce 函数小结

    一.前言 以下场景往往由于事件频繁被触发,因而频繁执行DOM操作.资源加载等重行为,导致UI停顿甚至浏览器崩溃. 1. window对象的resize.scroll事件 2. 拖拽时的mousemov ...

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

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

  3. [JavaScript] 函数节流(throttle)和函数防抖(debounce)

    js 的函数节流(throttle)和函数防抖(debounce)概述 函数防抖(debounce) 一个事件频繁触发,但是我们不想让他触发的这么频繁,于是我们就设置一个定时器让这个事件在 xxx 秒 ...

  4. 详解防抖函数(debounce)和节流函数(throttle)

    本文转自:https://www.jianshu.com/p/f9f6b637fd6c 闭包的典型应用就是函数防抖和节流,本文详细介绍函数防抖和节流的应用场景和实现. 函数防抖(debounce) 函 ...

  5. 白话debounce和throttle

    遇到的问题 在开发过程中会遇到频率很高的事件或者连续的事件,如果不进行性能的优化,就可能会出现页面卡顿的现象,比如: 鼠标事件:mousemove(拖曳)/mouseover(划过)/mouseWhe ...

  6. -_-#【Better Code】throttle / debounce

    浅谈javascript的函数节流 javascript函数的throttle和debounce throttle 疯狂触发事件,固定步调执行 debounce 疯狂触发事件,不会执行 var res ...

  7. lodash throttle和debounce

    https://lodash.com/docs#debounce throttle(又称节流)和debounce(又称防抖)其实都是函数调用频率的控制器 throttle:将一个函数的调用频率限制在一 ...

  8. throttle和debounce

    遇到的问题 在开发过程中会遇到频率很高的事件或者连续的事件,如果不进行性能的优化,就可能会出现页面卡顿的现象,比如: 鼠标事件:mousemove(拖曳)/mouseover(划过)/mouseWhe ...

  9. js函数防抖、节流实现

    防抖 Debounce 函数防抖就是,延迟一段时间再执行函数,如果这段时间内又触发了该函数,则延迟重新计算: // 简单实现 function debounce(fn, wait) { let t r ...

随机推荐

  1. 前端面试之JavaScript中的闭包!

    前端面试之JavaScript中的闭包! 闭包 闭包( closure )指有权访问另一个函数作用域中变量的函数. ----- JavaScript 高级程序设计 闭包其实可以理解为是一个函数 简单理 ...

  2. Bitter.Core系列九:Bitter ORM NETCORE ORM 全网最粗暴简单易用高性能的 NETCore 之 WITH 子句支持

    有时我们在聚合查询中,经常会有复杂的聚联查询.有时表的聚联查询SQL 子句比较复杂,DBA 会经常告诉们,能否通过WITH 子句优化.WITH 子句,是对SQL 聚联查询的优化.Bitter.Core ...

  3. 命名规范 api-guidelines api规范

    https://weui.io weui.css .weui-cell_select-before .weui-cell__bd:after{ display:none; } .weui-cell_s ...

  4. POJ2961_kmp

    Period Time Limit: 3000MS   Memory Limit: 30000KB   64bit IO Format: %I64d & %I64u Submit Status ...

  5. 六:SpringBoot-引入JdbcTemplate,和多数据源配置

    SpringBoot-引入JdbcTemplate,和多数据源配置 1.JdbcTemplate对象 1.1 JdbcTemplate核心方法 2.SpringBoot中使用JDBCTemplate ...

  6. Spark-1.6.1 Hadoop-2.6.4 VMware Ubuntu 分布式集群搭建 全过程

    本文从头开始零基础完全配置,适合小白. 本文在vmware中配置三台虚拟机,一台做Master,两台Worker,hadoop 和spark只需要在Master上配置,然后cp到worker上,包括配 ...

  7. linux c驴杂记

    C语言标准库中包含了各种用于处理错误的函数和宏.1.assert( ) 宏 #include<assert.h>void assert( int expression );可用于诊断程序b ...

  8. centos安装、升级新火狐最新版 31

    1.登录火狐主页 下载最新版本firefox-31.0.tar.bz2 解压: tar -jxvf firefox-31.0.tar.bz2 2.然后把旧版本的firefox卸掉 # yum eras ...

  9. IP路由__动态路由

    1.使用协议来查找网络并更新路由表的配置,就是动态路由.它比使用静态或默认路由方便,但它需要一定的路由器CPU处理时间和网络链接带宽.路由协议定义了路由器与相邻路由器通信时所使用的一组规则. 在互联网 ...

  10. docker(1)下载安装for mac

    前言 Docker 提供轻量的虚拟化,你能够从Docker获得一个额外抽象层,你能够在单台机器上运行多个Docker微容器,而每个微容器里都有一个微服务或独立应用,例如你可以将Tomcat运行在一个D ...