javascript的防抖和节流你了解吗
一：为什么需要防抖与节流
防抖和节流都是为了解决短时间内大量触发某函数或者事件而导致的性能问题，比如在
1.用户体验上，触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死，卡顿的现象
2.服务器上：加重服务器压力
二：防抖
防抖是当事件或函数被触发后，延迟n秒后在执行回调，如果在这n秒内事件或函数又被触发，则重新计时，直到n秒内没有触发事件或函数，则执行回调函数
图文解释：
（回城的时间就相当于延迟时间，如果在回城的时间内再次触发回城则重新倒计时回城时间）
案例：表单输入框事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" class="serach">
<script>
let serach = document.getElementsByClassName('serach')[0]
// console.log(serach);
serach.addEventListener('input', function() {
console.log('向后端发起了请求！');
})
</script>
</body>
</html>
运行：
可以看出当我每次输入一个数字的时候都发起了请求，这是不符合项目要求和这非常消耗服务器的性能，我们应该在用户在输入内容后的一段时间内如果用户不再输入内容再发起请求，用户如果在这一段时间内再次输入，则继续等待用户在一段时间内不再输入内容后再发起请求。
使用防抖优化：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" class="serach">
<script>
let serach = document.getElementsByClassName('serach')[0]
// console.log(serach);
let timer = null; //声明一个用于防抖的定时器变量timer
serach.addEventListener('input', function() {
clearTimeout(timer) //如果在定时器的时间间隔内再次触发事件则清除定时器，重新执行新的定时器函数
// 定时器函数
timer = setTimeout(function() {
console.log('向后端发起了请求！');
}, 500)
})
</script>
</body>
</html>
运行：
如果在500毫秒内调用多次，只会执行最后一次
可以看出在输入完内容后的500毫秒后才发起请求
防抖的应用场景：
1.用户在输入框连续输入一串字符时，可以通过放抖策略，只在输入完后，才执行查询的请 求，这样可以有效减少请求次数，节约请求资源。（也可以用节流）
2.登录、发短信等按钮避免用户点击太快，以致于发送了多次请求，需要防抖
3.调整浏览器窗口大小时，resize 次数过于频繁，造成计算过多，此时需要一次到位，就用到了防抖
4.文本编辑器实时保存，当无任何更改操作一秒后进行保存
三、节流
控制事件发生的频率从而达到减少一段时间内事件的触发频率，如控制为1s发生一次，甚至1分钟发生一次。
图文解释：
（当玩射击游戏时，无论你手点的有多快射出的弹还是有规律的发出（比如0.5发出一个弹））
案例：获取鼠标的最终坐标
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.app {
width: 800px;
height: 800px;
background-color: pink;
}
</style>
</head>
<body>
<div class="app">
</div>
<script>
let app = document.getElementsByClassName('app')[0]
app.addEventListener('mousemove', function(e) {
console.log(`x坐标${e.pageX},y坐标${e.pageY}`);
})
</script>
</body>
</html>
运行：
可以看出每次鼠标移动都执行函数，大大消耗性能，我们可以利用节流策略，一秒内只执行一次来节流
节流优化：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.app {
width: 800px;
height: 800px;
background-color: pink;
}
</style>
</head>
<body>
<div class="app">
</div>
<script>
let app = document.getElementsByClassName('app')[0]
let timer = true; //定义一个节流阀变量来控制节流阀为关闭还是开启状态，默认为开启
app.addEventListener('mousemove', function(e) {
if (!timer) {
return //判断节流阀是否关闭，如果节流阀还是false（关闭状态），则证明上次的函数未执行完，直接退出函数
}
timer = false; //设置节流阀为false，如果定时器函数没有设置为true，则定时器函数没执行，节流阀一直为关(false)
setTimeout(function() {
console.log(`x坐标${e.pageX},y坐标${e.pageY}`)
timer = true //定时器函数已经执行，设置节流阀为true
}, 500)
})
</script>
</body>
</html>
运行效果：
使用节流后，坐标打印次数明显变少，节流效果达成
四.防抖和节流的区别：
防抖:如果事件被频繁触发，防抖能保证只有最后一次触发生效!前面N多次的触发都会被忽略!
节流:如果事件被频繁触发，节流能够减少事件触发的频率，因此，节流是有选择性地执行一部分事件，单位时间内事件只能触发一次
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容!
相关推荐
-
浅谈JavaScript节流与防抖
目录 节流与防抖 概念: 区别 节流实现 节流函数 防抖实现 防抖函数 防抖升级版 总结 节流与防抖 概念: 区别 节流实现 节流函数 防抖实现 防抖函数 防抖升级版 总结 节流与防抖 背景:当我们频繁去请求资源.接口等其他的时候,就会造成操作Dom频繁,接口压力大等等,性能下降.比如我有时候会每次搜索会猛地敲回车,在网络不很好的时候,点击下一页按钮的时候也会一直点,可能网络不好也可能服务器性能低. 为了避免频繁触发同一事件或请求,这时候就要用到节流和防抖了. what?这是啥?当我第一次听到这
-
JavaScript防抖与节流详解
目录 防抖debounce 节流throttle 总结 防抖debounce 定义:对于短时间内连续触发的事件,比如滚动事件,防抖就是让某个时间期限内,事件处理函数只执行一次. 关于防抖,拿手指按压弹簧举例,用手指按压弹簧,一直按住,弹簧将不会弹起直到松开手指. 举例resize: function debounce(fn, wait){ var timer = null; return ()=>{ if(timer !== null){ clearTimeout(timer); } timer
-
什么是JavaScript的防抖与节流
目录 一.函数防抖(debounce) 1. 什么是防抖? 二.函数节流 2.1 定时器实现 2.2 时间戳实现 2.3 时间戳+定时器 一.函数防抖(debounce) 1. 什么是防抖? 函数防抖: 在频繁触发某一个事件时,一段时间内不再触发该事件后才会去调用对应的回调函数,在设定间隔时间内如果下一次事件被触发, 那么就重新开始定时器,直到事件触发结束. 规定时间内没有继续触发事件的前提下,再去调用事件处理函数: 具体如下面的例子所示: /*定义防抖函数 * func:传入一个函数,事件不再
-
JavaScript 防抖和节流详解
目录 防抖 节流 总结 防抖 自动门感应到有人,打开门,并且开始5秒倒计时,在 5 s 内有另外一个人靠近到门,门感应到人,重新5秒倒计时 当事件被触发时,设定一个延迟,若期间事件又被触发,则重新设定延迟,直到延迟结束,执行动作 (防止多次触发) web 应用上面 改变页面大小的统计 滚动页面位置的统计 输入框连续输入的请求次数控制 一开始,点击按钮,console.log('pay money') <body> <button id="btn">click&l
-
javascript的防抖节流函数解析
目录 防抖节流函数的解析 认识防抖和节流函数 认识防抖debounce函数 防抖函数的案例 认识节流throttle函数 节流函数的应用场景 自定义防抖和节流函数 总结 防抖节流函数的解析 认识防抖和节流函数 防抖和节流的概念其实最早并不是出现在软件工程中,防抖是出现在电子元件中,节流出现在流体流动中 而JavaScript是事件驱动的,大量的操作会触发事件,加入到事件队列中处理. 而对于某些频繁的事件处理会造成性能的损耗,我们就可以通过防抖和节流来限制事件频繁的发生: 防抖和节流函数目前已经是
-
浅析JavaScript 函数防抖和节流
函数防抖和节流都是对高频动作触发回调函数的一个优化,实现方式上有类似之处.先从使用场景做个区分. 防抖使用场景: 表单输入框校验 提交按钮避免重复提交 节流使用场景: scroll,mousemove,resize等 函数防抖(debounce) 表单输入框校验在用户不停的打字输入时并不需要向后台校验文本,只有当用户停下来一定时间后,这时候默认用户已经输入完毕了可以开始向后台提交文本了. 表单的提交按钮被用户多次连续点击时,显然并不需要每次点击都提交表单.仅在用户不点击之后,把最后一次的点击操作
-
JavaScript的防抖和节流案例
目录 防抖 节流: 防抖:在一定的时间内只执行最后一次任务: 节流:一定的时间内只执行一次: 防抖 <button id="debounce">点我防抖!</button> $('#debounce').on('click', debounce()); function debounce() { let timer; // 闭包 return function () { clearTimeout(timer); timer = setTimeout(() =&g
-
JavaScript中防抖和节流的区别及适用场景
目录 前言 防抖 例如 代码演示 节流 例如 代码演示 前言 防抖和节流,这个在我们的前端生涯中,这两个名词肯定不陌生,甚至经常被人问起: 两者有什么区别? 分别用于什么场景? ps:这就是高频的面试题了吧! 防抖 防抖是什么呢? 形象的的说就是:防止抖动(防抖函数内心独白:“你就抖动吧!等你不抖动了,我们在进行下一步”) 例如 一个搜索输入框, 用户不停的进行输入(这个时候就是抖动的过程), 等用户输入停止之后,再触发搜索. 代码演示 function debounce(fn, delay =
-
JavaScript中防抖和节流的实战应用记录
目录 前言 为什么我们需要防抖/节流 防抖 节流 总结 前言 你可能会遇到这种的情况,一个站点使用自动填充的文本框,内容的拖拽,效果的滚动.那么,你遇到防抖和截流的概率还是很高的.为了使得这些操作,比如自动填充能够顺畅工作,你需要引入防抖和截流功能. 防抖 -> Debounce 节流 -> Throttle 为什么我们需要防抖/节流 开篇已经简单提了,debounce/throttle 能让你的站点表现更优异.它们工作原理是通过减少动作发起的次数.我们简单举个例子,自动填充文本框触发接口请求
-
javascript的防抖和节流你了解吗
一:为什么需要防抖与节流 防抖和节流都是为了解决短时间内大量触发某函数或者事件而导致的性能问题,比如在 1.用户体验上,触发频率过高导致的响应速度跟不上触发频率,出现延迟,假死,卡顿的现象 2.服务器上:加重服务器压力 二:防抖 防抖是当事件或函数被触发后,延迟n秒后在执行回调,如果在这n秒内事件或函数又被触发,则重新计时,直到n秒内没有触发事件或函数,则执行回调函数 图文解释: (回城的时间就相当于延迟时间,如果在回城的时间内再次触发回城则重新倒计时回城时间) 案例:表单输入框事件 <!DOC
-
老生常谈Javascript的防抖和节流
目录 1. 什么是防抖 2.什么是节流 3.节流阀 总结 1. 什么是防抖 [解释]: 防抖策略(debounce)是当事件被触发后,延迟 n 秒后再执行回调,如果在这 n 秒内事件又被触发,则重新计时. [图解]: [作用]: 当用户频繁触发该事件的时候,确保只进行最后一次的请求操作,节约请求的资源 [实现输入框的防抖]: var timer = null // 1. 防抖动的 timer function debounceSearch(keywords) { // 2. 定义防抖的函数 ti
-
JavaScript的防抖和节流一起来了解下
目录 1.前言 2.函数防抖(debounce) 延迟防抖 前缘防抖 防抖函数实现总结 3.函数节流(throttling) 延迟节流 前缘节流 节流函数实现总结 4.两者区别 5.应用场景 总结 1. 前言 首先来举个例子.百度首页的百度输入框,用户输入的时候,每次输入的信息,我们都能看到百度服务器返回给我们的联想关键字.我们每改动一个字,它就换一次联想词,这是我们肉眼能看到的速度,实际上如果不加以处理,可能已经上服务器发起了好几十次的同一个关键字联想请求了,具体速度依赖于不同的pc等机器上的
-
JavaScript 防抖和节流遇见的奇怪问题及解决
场景 网络上已经存在了大量的有关 防抖 和 节流 的文章,为何吾辈还要再写一篇呢?事实上,防抖和节流,吾辈在使用中发现了一些奇怪的问题,并经过了数次的修改,这里主要分享一下吾辈遇到的问题以及是如何解决的. 为什么要用防抖和节流? 因为某些函数触发/调用的频率过快,吾辈需要手动去限制其执行的频率.例如常见的监听滚动条的事件,如果没有防抖处理的话,并且,每次函数执行花费的时间超过了触发的间隔时间的话 – 页面就会卡顿. 演进 初始实现 我们先实现一个简单的去抖函数 function debounce
-
关于JavaScript防抖与节流的区别与实现
目录 1.防抖 2.节流 3.总结 前言: 作为前端开发中会以下两种需求 (1)搜索需求 搜索的逻辑就是监听用户输入事件,等用户输入完成之后把数据发送给后端,后端返回匹配数据,前端显示数据到页面.如果只要用户输入就发请求,这样会给后端造成请求压力,需要控制请求的频率. (2)页面无限加载数据 页面无限加载数据的逻辑就是监听用户用户滚动事件,在用户滚动的过程中,去请求下一页的数据来显示到页面.,那么只要滚动就去发请求,同样会造成后端请求压力,需要控制请求的频率. 以上两种看起来都是控制请求频率的问