js函数防抖和函数节流
参考链接：https://juejin.im/post/5b651dc15188251aa30c8669
参考链接：https://www.jb51.net/article/158818.htm
在我们前端开发中，我们经常会需要绑定一些持续触发的事件，如 resize、scroll、mousemove 等等，但有些时候我们并不希望在事件持续触发的过程中那么频繁地去执行函数。
通常这种情况下我们怎么去解决的呢？
一般来讲，防抖和节流是比较好的解决方案。
函数节流（throttle）与 函数防抖（debounce）都是为了限制函数的执行频次，以优化函数触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象。
函数防抖
定义：就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。举个例子，当你在页面中使用onkeyUp监听用户在input框中的输入，如果用户按住一个6不放，那监听事件岂不是一直被触发，这样就浪费了一部分性能了，那么我们在一定事件内监听，也就是说我过了一秒再来看看你输入了多少个6，那这样是不是轻松多了。
原理：维护一个计时器，规定在延时时间后触发函数，但是在延时时间内再次被触发的话，就取消之前的计时器而重新设置，这样就能够保证只有最后一次操作被触发。即将所有操作合并为一个操作进行，并且只有最后一次操作是有效操作。
防抖函数分为非立即执行版和立即执行版。
非立即执行版：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>防抖</title>
</head>
<body>
<button id="debounce">防抖，防抖，防抖</button>
<script>
window.onload = function () {
let obtn = document.getElementById('debounce'); //获取按钮
obtn.addEventListener('click',debounceHandle(debounce,500),false); //监听绑定事件
} //防抖函数
function debounceHandle(func, delay) {
let timer = null;
return function(...args) {
if (timer) clearTimeout(timer);//如果存在事件就清除定时器
timer = setTimeout(() => {//如果不存在那么就开启定时器
func.apply(this, args);
}, delay);
};
}; //执行函数
function debounce() {
console.log('防抖,这里可以写一些防抖函数，如img中的onload事件');
}
</script>
</body>
</html>
立即执行版:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>防抖</title>
</head>
<body>
<button id="debounce">防抖，防抖，防抖</button>
<script>
window.onload = function () {
let obtn = document.getElementById('debounce'); //获取按钮
obtn.addEventListener('click',debounceHandle(debounce,500),false); //监听绑定事件
} //防抖函数
function debounceHandle(func, delay) {
let timer = null;
return function(...args) {
if (timer) clearTimeout(timer);
let callNow = !timer;
timer = setTimeout(() => {
timer = null;
}, delay);
if(callNow) func.apply(this, args);
};
}; //执行函数
function debounce() {
console.log('防抖,这里可以写一些防抖函数，如img中的onload事件');
}
</script>
</body>
</html>
上述防抖函数的代码还需要注意的是 this 和 参数的传递。是为了让 debounceHandle 函数最终返回的函数 this 指向不变以及依旧能接受到 e 参数。
函数节流
定义：当持续触发事件时，保证一定时间段内只调用一次事件处理函数，按照一定的规律在某个时间间隔内去处理函数。假如在一个页面中有任意多张图片，那么就有可能会使用懒加载技术，譬如图片的懒加载，我希望在下滑过程中图片不断的被加载出来，而不是只有当我停止下滑时候，图片才被加载出来。那么节流就是在一定时间间隔内触发一次事件。
原理：原理是通过判断是否达到一定时间来触发函数，使得一定时间内只触发一次函数。
高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>节流</title>
<style>
div {
height: 5000px;
}
</style>
</head>
<body>
<div>节流,节流,节流</div>
<script>
window.onload = function () {
window.addEventListener('scroll',throttleHandle(throttle),false); //监听绑定事件
} //节流函数
function throttleHandle (fn) {
let timer = null,
booleanVal = true; // 声明一个变量标志做判断
return function () {
if (!booleanVal) {
return
} //如果事件正在执行，那么就返回，将布尔值改为false
booleanVal = false;
//事件未执行，创建事件
timer = setTimeout(function() {
fn.apply(this,arguments);
booleanVal = true; //事件执行完将布尔值改回
},300)
}
} //执行函数
function throttle() {
var scrollNum = document.documentElement.scrollTop || document.body.scrollTop;
console.log(scrollNum);
}
</script>
</body>
</html>
js函数防抖和函数节流的更多相关文章
- JS函数防抖与函数节流
概念 函数防抖(debounce) 当调用动作过n毫秒后,才会执行该动作,若在这n毫秒内又调用此动作则将重新计算执行时间 函数节流(throttle) 预先设定一个执行周期,当调用动作的时刻大于等于执 ...
- js中实现函数防抖跟函数节流
最近刚接触两个新概念函数防抖与函数节流,虽然这些内容网上可以搜到很多,大家都有自己的一套的理解方式,都写得很好, 而自己则想在理解的基础上自己把代码实现一遍,加深印象. 一.函数防抖 假如我们有这样的 ...
- 微信小程序之使用函数防抖与函数节流
函数防抖和函数节流都是老生常谈的问题了.这两种方式都能优化 js 的性能.有些人可能会搞混两个的概念.所以,我以自己的理解,来解释这两个概念的含义.并且列举在小程序中这两个方法的使用. 函数防抖: 英 ...
- 函数防抖VS函数节流
(1)函数防抖debounce 函数触发停止一段时间后(期间不能再触发 debounce,否则将重新计时),再执行回调函数 机制: 防抖函数主要利用定时器的延迟执行特性,根据是否有定时器在等待执行: ...
- Vue函数防抖和函数节流
函数防抖(debounce) 应用场景 登录.发短信等按钮避免用户点击太快,以致于发送了多次请求,需要防抖 调整浏览器窗口大小时,resize 次数过于频繁,造成计算过多,此时需要一次到位,就用到了防 ...
- 前端常见原生方法的实现（bind，promise，new，extends，深拷贝，函数防抖，函数节流）
前端原生方法的实现,这里写一下常见的一些实现: 1.bind Function.prototype.bind2 = function (context) { var self = this; retu ...
- 函数防抖与函数节流 封装好的debounce和throttle函数
/** * 空闲控制 返回函数连续调用时,空闲时间必须大于或等于 wait,func 才会执行 * * @param {function} func 传入函数,最后一个参数是额外增加的this对象,. ...
- 【javascript】js中的函数节流和函数防抖
一.概念解释 函数节流和函数防抖,两者都是优化高频率执行js代码的一种手段. 大家大概都知道旧款电视机的工作原理,就是一行行得扫描出色彩到屏幕上,然后组成一张张图片.由于肉眼只能分辨出一定频率的变 ...
- js 函数的防抖(debounce)与节流(throttle) 带 插件完整解析版 [helpers.js]
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 函数防抖与节流是做什么的?下面进行通俗的讲解. 本文借鉴:h ...
随机推荐
- linux commands - 一次性解压多个tar.gz文件
tar -zxvf list所有tar.gz文件,然后利用xargs将其作为参数传给tar命令.-n 1表示每次传一个参数. xargs: https://www.cnblogs.com/wangqi ...
- waiting list
Problem: how to cluster non-stationary multivariate time series. What are stationary time series How ...
- 关于SkinTextBox中SkinTxt的事件使用
SkinTxt的事件中的事件不能像一般的事件那样在属性中直接双击生成,它里面的事件都需要进行一定的转换间接使用,具体用法如下: 1.手动编写事件需要做的操作的方法 public void txtCod ...
- 最新NetSarang Xmanager安装激活-XShell、XFtp
NetSarang Xmanager Enterprise 是一个简单易用的高性能的运行在 Windows 平台上的 X Server 软件.它能把远端 Unix/Linux 的桌面无缝地带到你的Wi ...
- 对主定理(Master Theorem)的理解
前言 虽说在学OI的时候学到了非常多的有递归结构的算法或方法,也很清楚他们的复杂度,但更多时候只是能够大概脑补这些方法为什么是这个复杂度,而从未从定理的角度去严格证明他们.因此借着这个机会把主定理整个 ...
- yii2 生成随机字符串
uuid uuid use Faker\Provider\Uuid; Uuid::uuid(); yii自带 生成32位字符串 Yii::$app->getSecurity()->gene ...
- 【剑指Offer】47、求1+2+3+...+n
题目描述: 求1+2+3+...+n,要求不能使用乘除法.for.while.if.else.switch.case等关键字及条件判断语句(A?B:C). 题解:递归实现/利用Math //利用短路 ...
- 微信小程序期末复习
过什么六一,复习不完了... 第1章作业 一.单选题(共10题,100.0分) 1以下哪个不是主流的手机操作系统? A.Android B.iOS C.Windows Phone D.Blackber ...
- 反射_python
一.反射(通过字符串的形式去操作对象中的成员) 1.getattr:获取对象中的字段和方法 2.hasattr:判断对象里面是否有字段或方法 3.setattr:设置对象里面的字段或方法 4.dela ...
- MCPS & MIPS
MIPS:Million Instructions Per Second MCPS:Million Cycles Per Second MIPS = Total Instructions*Sampli ...