js 函数节流throttle 函数去抖debounce
1、函数节流throttle
通俗解释：
假设你正在乘电梯上楼，当电梯门关闭之前发现有人也要乘电梯，礼貌起见，你会按下开门开关，然后等他进电梯； 但是，你是个没耐心的人，你最多只会等待电梯停留一分钟； 在这一分钟内，你会开门让别人进来，但是过了一分钟之后，你就会关门，让电梯上楼。
所以throttle的作用是，预先设定一个执行周期，当调用动作的时刻大于等于执行周期则执行该动作，然后进入下一个新的时间周期。
应用：在指定时间，事件最多触发一次，如监听滚动事件。
上述例子改为 地铁 更合适。
2、函数去抖debounce
假设你正在乘电梯上楼，当电梯门关闭之前发现有人也要乘电梯，礼貌起见，你会按下开门开关，然后等他进电梯； 如果在电梯门关闭之前，又有人来了，你会继续开门； 这样一直进行下去，你可能需要等待几分钟，最终没人进电梯了，才会关闭电梯门，然后上楼。
所以debounce的作用是，当调用动作触发一段时间后，才会执行该动作，若在这段时间间隔内又调用此动作则将重新计算时间间隔。
应用：百度首页的搜索按钮。
3、函数节流与函数去抖实现
<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>函数节流与函数去抖</title>
</head> <body>
<button type='button' id="btn">函数节流</button>
<script src="https://cdn.bootcss.com/lodash.js/4.17.10/lodash.min.js"></script>
<script type="text/javascript">
const btn = document.getElementById('btn');
//函数去抖
function debounce(fn, delay) {
var timer = null;
return function(...args) {
clearTimeout(timer);
timer = setTimeout(() => fn.apply(this, args), delay);
}
} //函数节流
function throttle(fn, wait) {
var timer;
return function(...args) {
if(!timer) {
timer = setTimeout(() => timer = null, wait);
return fn.apply(this, args);
}
}
} btn.onclick = debounce(function() {
console.log("clicked");
}, 300); //按钮每500ms一次点击有效
btn.onclick = throttle(function() {
console.log("button clicked");
}, 500);
</script>
</body> </html>
一个具体例子（lodash+vue）：
<template>
<div class="about">
<Button type="primary">Primary</Button>
<Upload
action="http://39.106.100.155:3001/file-upload/multiple-uploadll/"
:data="imgData"
multiple
:headers="headers"
>
<Button icon="ios-cloud-upload-outline">Upload files</Button>
</Upload>
</div>
</template>
<script>
import _ from "lodash";
export default {
data() {
return {
imgData: {
userName: "test"
},
headers: {
token: "123"
}
};
},
methods: {
test() {
console.log("click");
this.debounce();
this.throttle();
}
},
created() {
let i = 0;
// 在 0.5s 秒内最多执行 func 一次的函数。
this.debounce = _.debounce(() => {
console.log("debounce");
}, 500);
// 在 0.5s 秒内最多执行 func 一次的函数。
this.throttle = _.throttle(() => {
console.log("throttle");
}, 500);
let time = setInterval(() => {
// this.test();
if (i > 9) {
clearInterval(time);
}
this.test();
i++;
}, 100);
}
};
</script>
控制台输出：
throttle 每0.5s就执行一次了。
而debounce 只执行了一次。
js 函数节流throttle 函数去抖debounce的更多相关文章
- [JavaScript] 函数节流(throttle)和函数防抖(debounce)
js 的函数节流(throttle)和函数防抖(debounce)概述 函数防抖(debounce) 一个事件频繁触发,但是我们不想让他触发的这么频繁,于是我们就设置一个定时器让这个事件在 xxx 秒 ...
- JavaScript 函数节流和函数去抖应用场景辨析
概述 也是好久没更新 源码解读,看着房价蹭蹭暴涨,心里也是五味杂陈,对未来充满恐惧和迷茫 ...(敢问一句你们上岸了吗) 言归正传,今天要介绍的是 underscore 中两个重要的方法,函数节流和函 ...
- javascript中的函数节流和函数去抖
带着问题去尝试 首先我们要知道为什么要用到函数节流和函数去抖?我们带着以下的疑问来进行分析! 1.比如搜索框,你会用到什么事件(change.blur.keyup等)?去做什么效果?2.再比如scro ...
- JS中的函数节流throttle详解和优化
JS中的函数节流throttle详解和优化在前端开发中,有时会为页面绑定resize事件,或者为一个页面元素绑定拖拽事件(mousemove),这种事件有一个特点,在一个正常的操作中,有可能在一个短的 ...
- JavaScript 中函数节流和函数去抖的讲解
JavaScript 中函数节流和函数去抖的讲解 我们都知道频繁触发执行一段js逻辑代码对性能会有很大的影响,尤其是在做一些效果实现方面,或者逻辑中需要进行后端请求,更是会导致卡顿,效果失效等结果,所 ...
- 函数节流throttle和防抖debounce
throttle 函数节流 不论触发函数多少次,函数只在设定条件到达时调用第一次函数设定,函数节流 1234567891011 let throttle = function(fn,intervalT ...
- 【javascript】js中的函数节流和函数防抖
一.概念解释 函数节流和函数防抖,两者都是优化高频率执行js代码的一种手段. 大家大概都知道旧款电视机的工作原理,就是一行行得扫描出色彩到屏幕上,然后组成一张张图片.由于肉眼只能分辨出一定频率的变 ...
- JS函数节流和函数防抖问题分析
问题1:如果实现了dom拖拽功能,但是在绑定拖拽事件的时候发现每当元素稍微移动一点便触发了大量的回调函数,导致浏览器直接卡死,这个时候怎么办? 问题2:如果给一个按钮绑定了表单提交的post事件,但是 ...
- 如何使用 js 实现一个 throttle 函数
如何使用 js 实现一个 throttle 函数 原理 实现方式 "use strict"; /** * * @author xgqfrms * @license MIT * @c ...
随机推荐
- [BZOJ4416][SHOI2013]阶乘字符串(子集DP)
怎么也没想到是子集DP,想到了应该就没什么难度了. 首先n>21时必定为NO. g[i][j]表示位置i后的第一个字母j在哪个位置,n*21求出. f[S]表示S的所有全排列子序列出现的最后末尾 ...
- LCA POJ 1330 Nearest Common Ancestors
POJ 1330 Nearest Common Ancestors Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 24209 ...
- 69.广搜练习： 最少转弯问题（TURN）
[问题描述] 给出一张地图,这张地图被分为n×m(n,m<=100)个方块,任何一个方块不是平地就是高山.平地可以通过,高山则不能.现在你处在地图的(x1,y1)这块平地,问:你至少需要拐几个弯 ...
- WebSQL的基本使用过程
1.创建或打开数据库(openDatabase) var db = openDatabase('dbname', '1.0', 'discription', 2 * 1024); // 目前测试只有C ...
- Linux使用C语言链接MsSQL
1.安装gcc编译器 yum install gcc 2.下载freetds wget ftp://ftp.freetds.org/pub/freetds/stable/freetds-patched ...
- bosondata/chrome-prerender: Render JavaScript-rendered page as HTML/PDF/mhtml/png/jpeg using headless Chrome
bosondata/chrome-prerender: Render JavaScript-rendered page as HTML/PDF/mhtml/png/jpeg using headles ...
- head first---------facade design pattern
head first----------外观模式或者门面模式 外观模式又名门面模式:提供了一个统一的接口,用来访问子系统中的一群接口.外观模式定义了一个高层接口,从而让子系统更容易使用 ...
- [js插件]学习Highcharts
引言 放了三天假,在家闲着没事,做了一个个人记账的web应用程序,其中一块就是数据统计的功能,也就学习了一下Highcharts. Highcharts Highcharts 是一个用纯JavaScr ...
- Wix使用整理(二)
1) 安装卸载时进行日志记录 Wix 制作的 Installer 的调试很麻烦,没有直接的 Bug 工具,可以通过记录安装日志的方式进行间接调试.命令为 msiexec /i pack ...
- 利用tca时间聚簇分析方法分析fmri数据
一.利用ica进行fmri数据分解时,在得到相互独立的成分后,这些成分的后续处理,其实是有很多文章可以做的.比如,对这些成分进行排序和选择.如果能够提出某种方法,能够自动地制造特征,并将这些特征与分解 ...