深入了解JavaScript 防抖和节流
更新时间：2019年09月12日 17:00:24 作者：ajuan
这篇文章主要介绍了JavaScript 防抖和节流,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
概述
说明
在项目过程中，经常会遇到一个按钮被多次点击并且多次调用对应处理函数的问题，而往往我们只需去调用一次处理函数即可。有时也会遇到需要在某一规则内有规律的去触发对应的处理函数，所以就需要使用到函数防抖与函数节流来帮助我们实现我们想要的结果以及避免不必要的问题产生。
函数防抖(debounce)
定义：当持续触发事件时(如连续点击按钮多此)，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，有一次触发了事件，就重新开始延时。
原理：维护一个计时器，规定在延时时间后触发函数，但是在延时时间内再次被触发的话，就取消之前的计时器而重新设置，这样就能够保证只有最后一次操作被触发。即将所有操作合并为一个操作进行，并且只有最后一次操作是有效操作。
函数节流(throttle)
定义：当持续触发事件时，保证一定时间段内只调用一次事件处理函数，按照一定的规律在某个时间间隔内去处理函数。
原理：原理是通过判断是否达到一定时间来触发函数，使得一定时间内只触发一次函数。
代码
函数防抖
触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间
每次触发事件时都取消之前的延时调用方法
function debounce(fn) {
let timeout = null; // 创建一个标记用来存放定时器的返回值
return function () {
clearTimeout(timeout); // 每当用户输入的时候把前一个 setTimeout clear 掉
timeout = setTimeout(() => { // 然后又创建一个新的 setTimeout, 这样就能保证输入字符后的 interval 间隔内如果还有字符输入的话，就不会执行 fn 函数
fn.apply(this, arguments);
}, 500);
};
}
function sayHi() {
console.log('防抖成功');
}
var inp = document.getElementById('inp');
inp.addEventListener('input', debounce(sayHi)); // 防抖
函数节流
高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率
每次触发事件时都判断当前是否有等待执行的延时函数
function throttle(fn) {
let canRun = true; // 通过闭包保存一个标记
return function () {
if (!canRun) return; // 在函数开头判断标记是否为true，不为true则return
canRun = false; // 立即设置为false
setTimeout(() => { // 将外部传入的函数的执行放在setTimeout中
fn.apply(this, arguments);
// 最后在setTimeout执行完毕后再把标记设置为true(关键)表示可以执行下一次循环了。当定时器没有执行的时候标记永远是false，在开头被return掉
canRun = true;
}, 500);
};
}
function sayHi(e) {
console.log(e.target.innerWidth, e.target.innerHeight);
}
window.addEventListener('resize', throttle(sayHi));
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了学习JavaScript编程语言的8张思维导图分享,本文给出了javascript变量、javascript运算符、javascript数组、javascript流程语句、javascript字符串函数、javascript函数基础、javascript基础DOM操作、javascript正则表达式的思维导图,需要的可以参考下2015-03-03
这篇文章主要介绍了支持移动端原生js轮播图的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
这篇文章主要介绍了JS实现具备延时功能的滑动门菜单效果,涉及JavaScript基于鼠标事件与时间函数实现页面样式延迟变换功能,具有一定参考借鉴价值,需要的朋友可以参考下2015-09-09
今天读John Resig的Pro Javascript Techniques时候看到他书上给的一个关于drag and drop的例子, 合上书本自己写一个简化版本的。大约20分钟完成， 没有考虑兼容firefox。整个代码封装成一个对象 也是借鉴书中的风格。我觉得很好。2009-04-04
这篇文章主要带领大家学习JavaScript设计模式，其中重点介绍链式调用，感兴趣的小伙伴们可以参考一下2015-11-11
这篇文章主要介绍了JS+CSS实现模仿浏览器网页字符查找功能的方法,实例分析了javascript实现查找功能的样式及相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-02-02
这篇文章主要介绍了JS添加或删除HTML dom元素的方法,结合实例形式分析了javascript针对HTML DOM元素节点的创建、追加、删除等相关操作技巧与注意事项,需要的朋友可以参考下2019-03-03
这篇文章主要为大家详细介绍了微信小程序实现炫酷的弹出式菜单特效，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-01-01
最近公司项目需求需要对设备在地图上面进行监控,并在当设备一定距离时进行聚合,这篇文章主要给大家介绍了关于uniapp实现地图点聚合功能的相关资料,需要的朋友可以参考下2022-12-12
这篇文章主要介绍了Javscript调用iframe框架页面中函数的方法,可实现iframe之间传值或修改值,是非常实用的技巧,需要的朋友可以参考下2014-11-11
最新评论