正文

js debounce & throttle All In One

IP云
IP云V管理员/1 阅读
09/26
小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

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. SOAPUI使用教程-入门REST测试

    首先,通过选择文件菜单中的“新建REST项目”选项创建从文件菜单中一个新的REST项目: 指定服务端点场下谷歌地图API网址: http://maps.googleapis.com/maps/api/ ...

  2. UE4 WCF RestFul 服务器 读取JSON 数据并解析 简单实例

    Note:不知道为什么通过Txt读取的JsonString,如果TXT 不是ANSI编码的话,会报JsonArrayStringToUStruct  Unable to parse. bool UWg ...

  3. jQuery DataTable-JavaScript API

    虽然大多数时候你的Javascript交互将通过使用datatable初始化对象作为描述在使用这个网站的部分,有时,你会发现它有用一些外部控制表.可以使用以下函数从jQuery.dataTable对象 ...

  4. devi into python 笔记（六）正则表达式 原始字符串

    字符串函数replace: #string.replace: #字符串的replace方法:替换子串,不改变原来的字符串 s = "broad road" #打印出来会发现不单单是 ...

  5. FPGA上如何求32个输入的最大值和次大值：分治

    上午在论坛看到个热帖,里头的题目挺有意思的,简单的记录了一下. 0. 题目 在FPGA上实现一个模块,求32个输入中的最大值和次大值,32个输入由一个时钟周期给出.(题目来自论坛,面试题,如果觉得不合 ...

  6. 201621123057 《Java程序设计》第12周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. 2. 面向系统综合设计-图书馆管理系统或购物车 使用流与文件改造你的图书馆管理系统或购物车. 2.1 简述如何 ...

  7. 【iCore1S 双核心板_FPGA】例程一：GPIO输出实验——点亮LED

    实验现象: 三色LED循环点亮. 核心源代码: //--------------------Module_LED-----------------------------// module LED( ...

  8. mysql查询记录修改时间于现在大于30分钟

    (unix_timestamp(now())-`updatetime`)>1800

  9. Cesium添加水面

    var viewer = new Cesium.Viewer('cesiumContainer');var waterPrimitive = new Cesium.Primitive({ //show ...

  10. input file获取选择图片的本地路径和base64路径

    input file获取选择图片的本地路径和base64路径 本地路径: myHeadFile: function (e) { // 这里是input file 的onchange事件 ] const ...