大家好，我是大澈！
本文约2300+字，整篇阅读大约需要6分钟。
本文主要内容分三部分，第一部分是需求分析，第二部分是实现步骤，第三部分是问题详解。
如果您只需要解决问题，请阅读第一、二部分即可。
如果您有更多时间，进一步学习问题相关知识点，请阅读至第三部分。
当用户多次频繁点击按钮时，只允许请求一次后端接口，避免重复无用请求。
没办法，谁让我们的客户就是会1秒点10次的超能力。
对于控制事件触发的频率，我们应该很容易的就会想到JS中的防抖和节流。
防抖（Debounce）和节流（Throttle）是前端开发中最常用的优化处理方式，相信大家也都会使用。
但是如果谈起两者定义的区分，以及两者应用场景的不同，就会有朋友吐槽：“我靠，这不都一样嘛！”。
所以，我们到底要怎么选择呢？
简单的定义区分：
详细的定义区分：
最后，再搭配上“大澈原创”之无敌美丽动人草图：
就问你，还有谁还区分不明白防抖和节流的定义，还有谁？
真实的项目中，在不同的场景下灵活切换使用防抖或节流，才会更加减少不必要的资源消耗，更加提高前端应用的性能和响应性。
防抖（Debounce）的应用场景：
节流（Throttle）的应用场景：
防抖代码实例如下：
// 防抖：点击查询城市接口var btn1 = document.querySelector("button");var timer;btn1.onclick = function () {//先清空延时器，然后再去调用接口clearTimeout(timer);// 每次点击按钮都会清空延时器,然后重新计时,延迟一秒执行函数timer = setTimeout(city, 3000);};function city() {ajax({method: "get",url: "https://geoapi.qweather.com/v2/city/lookup",data: {location: "青岛",key: "759cb11054344aaba4b8791ec40274dd",},aysn: true,contentType: "",success: function (res) {var obj = JSON.parse(res);console.log(obj, "请求成功的数据");},});节流代码实例如下：
// 节流：鼠标移动在控制台打印坐标// fn(3000, handlePrint)function fn(delay, behavior) {var timer = null;return function (val) {if (!timer) {timer = setTimeout(function () {//调用handlePrint函数behavior(val);timer = null;}, delay);}};}function handlePrint(val) {console.log(val, "我是鼠标坐标");}//调用fn把1000和handlePrint这个函数传进去var handle = fn(3000, handlePrint);document.addEventListener("mousemove", function (e) {handle(e.offsetX);});只是看看原理，差不多了解即可，不要太纠结，项目中肯定不会这么使用，不然会被喷的。
Vue等真实项目中，往往都会调用第三方库的函数，具体内容见第三部分。
流行的独立JavaScript 库：
特定于框架的JavaScript 库：
import { useDebounce, useThrottle } from '@vueuse/core';// 防抖// 在值变化后延迟500毫秒触发const debouncedValue = useDebounce(value, 500); // 节流// 将函数封装为节流函数，每300毫秒触发一次const throttledFunction = useThrottle(myFunction, 300); // 在 Vue 组件中使用防抖和节流export default {setup() {const debouncedValue = useDebounce(value, 500);const throttledFunction = useThrottle(myFunction, 300);},}本文链接：http://www.28at.com/showinfo-26-51250-0.htmlJS问题：项目中如何区分使用防抖或节流？
声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com
上一篇： 看完后，你再也不用怕面试问并发编程啦
下一篇： 五种注册中心，如何选型？
Copyright © 2016-2023 天津谷骐科技有限公司 版权所有 sitemap.xml
违法及侵权请联系：2376512515@qq.com 津ICP备18001702号
津公网安备 12010102000574号
