大家好，欢迎来到IT知识分享网。
文章目录
一、防抖和节流的定义
防抖和节流本质上是优化高频率执行代码的一种手段，如：浏览器的
resize scroll keypress mousemove等事件在发时，会不断地调用绑定在事件上的回调函数，极大地浪费资源，降低前端性能为了优化体验，需要对这类事件进行调用次数的限制，对此我们就可以采用throttle(防抖)和deboumnce(节流)的方式来减少调用频率
节流：n秒内只运行一次，若在n 秒内重复触发，只有一次生效
防抖：n秒后在执行该事件，若在n秒内被重复触发，则重新计时。用户高频事件完了，再进行事件操作
二、防抖应用场景
- 搜索框搜索输入。只需用户最后一次输入完，再发送请求
- 手机号、邮箱验证输入检测onchange /oninput事件
- 窗口大小计算。只需窗口调整完成后，计算窗口大小。防止重复渲染
三、节流应用场景
- 懒加载、滚动加载、加载更多或监听滚动条位置
- 防止高频点击提交，防止表单重复提交
四、为什么要防抖?
- 有的操作是高频触发的，但是其实触发一次就好了，
- 比如我们短时间内多次缩放页面，那么我们不应该每次缩放都去执行操作，应该只做一次就好。
- 再比如说监听输入框的输入，不应该每次都去触发监听，应该是用户完成一段输入后在进行触发。
总结：
等用户高频事件完了，再进行事件操作。
4.1、防抖怎么做
设计思路：事件触发后开启一个定时器，如果事件在这个定时器限定的时间内再次触发，则清除定时器，在写一个定时器，定时时间到则触发。
<body> <input type="text" id="input" /> <script> /* 防抖 */ function debounce(fn, delay) { let timer = null; return function () { clearTimeout(timer); timer = setTimeout(() => { fn.apply(this, arguments); }, delay); }; } /* input事件触发执行的逻辑 */ function trigger(e) { console.log(e.target.value); } const inputDom = document.getElementById("input"); // 不加防抖 // inputDom.oninput = trigger; // 加防抖 inputDom.oninput = debounce(trigger, 200); </script> </body> 五、为什么要节流
防抖存在一个问题
事件会一直等到用户完成操作后一段时间在操作，如果一直操作，会一直不触发。比如说是一个按钮，点击就发送请求，如果一直点，那么请求就会一直发不出去。
这里正确的思路
应该是第一次点击就发送，然后上一个请求回来后，才能再发。
节流就是减少流量，将频繁触发的事件减少，并每隔一段时间执行。即，控制事件触发的频率
总结：某个操作希望上一次的完成后再进行下一次，或者希望隔一段时间触发一次。
5.1、节流怎么做?
设计思路：
我们可以设计一种类似控制阀门一样定期开放的函数，事件触发时让函数执行一次，然后关闭这个阀门，过了一段时间后再将这个阀门打开，再次触发事件。
<body> <button id="btn">点我</button> <script> /* 防抖 */ function throttle(fn, delay) { let valid = true; return function () { /* 一开始就触发---后续每隔delay时间内只触发一次 */ if (valid) { valid = false; // 关闭阀门 // 如果阀门已经打开，就继续往下 setTimeout(() => { fn.apply(this, arguments); // 定时器结束后执行 valid = true; // 执行完成后打开阀门 }, delay); } }; } /* 点击事件触发执行的逻辑 */ function trigger(e) { console.log("按钮被点击了"); } const btnDom = document.getElementById("btn"); // 不加节流 // btnDom.addEventListener("click", trigger); // 加节流的 btnDom.addEventListener("click", throttle(trigger, 1000)); </script> </body> - 刚开始valid为true，然后将valid重置为false,进入了定时器
- 在定时器执行完毕后之后，才会将valid重置为true
- valid为true之后，之后的点击才会生效
- 在定时器的时间期限内，valid还没有重置为true，
- 就实现了在N秒内多次点击只会执行一次的效果
六、总结
防抖和节流相同点：
防抖和节流都是为了阻止操作高频触发，从而浪费性能。
防抖和节流不同点：
- 防抖是触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。适用于可以多次触发但触发只生效最后一次的场景。
- 节流是高频事件触发，但在n秒内只会执行一次，如果n秒内触发多次函数，只有一次生效，节流会稀释函数的执行频率。
七、插件lodash实现防抖和节流（推荐）
lodash插件：里面封装函数的防抖与节流与节流的业务【闭包+延迟器】
lodash函数库对外暴露_函数
npm i --save lodash 7.1、使用
import _ from 'lodash' 7.2、语法
fn是你需要处理的方法，delay延迟时间
_.throttle(fn,delay) _.debounce(fn,delay) 八、vue中使用lodash
<template> <div @mouseover="myThrottle" @mouseout="myThrottle"></div> </template> <script> import _ from "lodash"; export default { data() { return { myThrottle: null, }; }, mounted() { this.myThrottle = _.throttle(this.trigger, 200); }, methods: { // 更新 trigger() { console.log("鼠标移入/出"); }, }, }; </script> 免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://haidsoft.com/110026.html
