前端面试知识点—防抖与节流 【小咚“面筋”记】

2024-02-11 01:10
文章标签 知识点 面试 前端 frontend 节流 面筋 防抖 小咚

本文主要是介绍前端面试知识点—防抖与节流 【小咚“面筋”记】，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

文章目录

  • 前言
  • 一、防抖和节流的应用场景
  • 二、防抖（debounce）
  • 三、节流（throttle）
  • 四、验证防抖与节流
  • 五、源代码（html）
  • 总结

前言

今天早早起来去图书馆完成了日常任务，虽然是下雨天，但是还是要时刻保持学习状态，不然以后就真找不到工作啦！（哈哈哈，人直接裂开了）接下来来说一下节流和防抖吧，虽然上次面试没有问到，但我在看别人的面试经验中有经常提到，虽然防抖和节流这两个词听起来挺高大上的，但是实际学习一下其实也没有那么难，简单点来说就是去控制触发次数。

一、防抖和节流的应用场景

在JS的事件中，给DOM绑定事件，有些事件触发频率是不可控制的，比如滚动滚动条事件onscroll、鼠标移动mousemove、窗口大小改变事件onresize，这些事件触发次数非常高频而且也很快，如果其回调函数中所要执行的代码比较复杂和庞大，则会造成响应跟不上触发频率，甚至是浏览器卡死，极大的浪费了浏览器的处理性能。
针对此类的问题的解决办法就是防抖和节流函数，看了很多博客，有一句话对这两个函数总结的很到位——“防抖控制次数，节流控制频率”
防抖
上面是鼠标移动事件的触发，一个是正常情况，另一个是加了防抖函数，我设置的时延是1秒。可以看出正常情况下触发的频率非常高，通过防抖来限制其触发的次数。
节流
上图也是鼠标移动监听事件，分别输出了正常和节流情况的触发次数，时延也同样也是1秒，同样的是去避免高频的触发事件，但是节流是通过其触发的频率来控制的，可以看出相同的间隙触发了一次节流的函数。
以上的防抖和节流的区别通过后面的学习就能明白其中的原理了。

二、防抖（debounce）

防抖的实现方法是通过定时器，只要在延时时间内再次触发事件，就会重新计时，然后直到计时结束才能再次触发，就像上面鼠标移动防抖，只要我一直移动鼠标，计时器就会不断的被重新触发重新开始计时，除非停止移动1s后才能再次触发函数，所以说防抖是控制次数，短时间内大量高频的触发事件会被屏蔽，从而达到防抖效果。

代码实现如下（示例）：

		/*** 防抖* fn [function] 需要防抖的函数* delay [number] 毫秒，防抖期限值*/function debounce(fn, delay) {let timer = null;return () => {if (timer) {clearTimeout(timer);}timer = setTimeout(fn, delay);}}

三、节流（throttle）

节流的方法同样也需要使用到定时器，只不过节流是控制触发频率，节流的实现思路是控制一个定时器，只要时间还没到就无法触发函数，也不会清除定时器重新计时，所以只要经过一定时间后就能触发事件，就像之前鼠标移动展示的效果一样，一直移动鼠标，但是只要计时时间一到就能再次触发函数。只要我一直移动鼠标，相同时间间隔就会再次触发函数，这样就实现了节流的效果。

        /*** 节流* fn [function] 需要节流的函数* delay [number] 毫秒，间隔时间*/function throttle(fn, delay) {let valid = false;return () => {if (!valid) {setTimeout(() => {fn();valid = false;}, delay)}valid = true;}}

四、验证防抖与节流

前面已经写好防抖和节流的函数现在来测试一下它们吧！除了滚动条的事件，剩下两个我会用正常的触发次数作为对比，来展示防抖和节流的效果。我设置的时延都是1秒，一般正常的使用应该是小于1秒的，这里设置1秒的时延主要是为了能更加直观的感受到防抖和节流的效果。

  1. 滚动条事件测试
		//监听浏览器滚动条触发var count = 0;function scrollMouse() {var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;count++;console.log("滚条位置" + scrollTop + "——触发次数" + count);}//滚动条监听绑定，分别取消注释来查看效果// window.onscroll = scrollMouse;//防抖// window.onscroll = debounce(scrollMouse, 1000);//节流// window.onscroll = throttle(scrollMouse, 1000);

以上用例没有对比，请copy上面的代码自行测试感受效果。

  1. 按钮事件测试
		//防抖按钮对比document.getElementById("fd").onclick = debounce(() => {console.log("按钮——防抖");}, 1000);document.getElementById("fd").addEventListener("click", () => {console.log("防抖按钮正常触发");});//节流按钮对比document.getElementById("jl").onclick = throttle(() => {console.log("按钮——节流");}, 1000);document.getElementById("jl").addEventListener("click", () => {console.log("节流按钮正常触发");});

下面是测试截图
防抖
防抖函数只要在延时时间内一直触发，就不会再次运行，所以是控制次数。
节流
节流函数不断触发的时候只要时间间隔一到就会再次运行函数，相同的时间间隔会再次触发函数，所以是控制频率。

  1. 鼠标移动事件测试
    下面的节流和防抖需要分开测试，自行拷贝代码，然后进行注释和解注。
		//鼠标移动//防抖window.onmousemove = debounce(() => {console.log("防抖——鼠标移动！")}, 1000);// //节流// window.onmousemove = throttle(() => {//     console.log("节流——鼠标移动");// }, 1000);//正常window.addEventListener("mousemove", () => {console.log("鼠标移动正常触发！");})

测试结果在文章开始有截图可以回到刚开始的地方查看效果。

五、源代码（html）

<!DOCTYPE html>
<html lang="ch"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>防抖和节流</title><script></script>
</head><body><button id="fd">防抖</button><button id="jl">节流</button><script>let ul = document.createElement("ul");let str = "";for (let i = 0; i < 100; i++) {str += "<li>ZERO丶X</li>\n";}ul.innerHTML = str;// console.log(ul)document.body.appendChild(ul);//--------------------------------------------------------------------------------------------------------/*** 防抖* fn [function] 需要防抖的函数* delay [number] 毫秒，防抖期限值*/function debounce(fn, delay) {let timer = null;return () => {if (timer) {clearTimeout(timer);}timer = setTimeout(fn, delay);}}/*** 节流* fn [function] 需要节流的函数* delay [number] 毫秒，间隔时间*/function throttle(fn, delay) {let valid = false;return () => {if (!valid) {setTimeout(() => {fn();valid = false;}, delay)}valid = true;}}//监听浏览器滚动条触发var count = 0;function scrollMouse() {var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;count++;console.log("滚条位置" + scrollTop + "——触发次数" + count);}//滚动条监听// window.onscroll = scrollMouse;// window.onscroll = debounce(scrollMouse, 1000);// window.onscroll = throttle(scrollMouse, 1000);//防抖按钮对比document.getElementById("fd").onclick = debounce(() => {console.log("按钮——防抖");}, 1000);document.getElementById("fd").addEventListener("click", () => {console.log("防抖按钮正常触发");});//节流按钮对比document.getElementById("jl").onclick = throttle(() => {console.log("按钮——节流");}, 1000);document.getElementById("jl").addEventListener("click", () => {console.log("节流按钮正常触发");});//鼠标移动//防抖window.onmousemove = debounce(() => {console.log("防抖——鼠标移动！")}, 1000);// //节流// window.onmousemove = throttle(() => {//     console.log("节流——鼠标移动");// }, 1000);//正常window.addEventListener("mousemove", () => {console.log("鼠标移动正常触发！");})</script>
</body>
</html>

上面是全部的代码，粘贴到html文档中，浏览器打开在控制台即可查看触发函数的效果。

总结

今天又是忙碌的一天呀，防抖和节流之前就有看到过，刚开始以为是很高大上的技术和东西，实际了解过以后其实也并没有那么难，所以说万事开头难，只要迈出第一步后面就循循渐进了，今天下雨，燕郊的天又冷了几分，但是依然凉不了我们上学人心中一团熊熊燃烧的梦想之火，上学人上学魂，上学都是人上人！（哈哈哈哈）铁打的意志，钢铁的决心！加油！冲！！！

—— 2020.11.18 23:30 今天下雨，所以没有跑步，实验室里面搞项目对接口，整了一晚上，好累呀！等会回宿舍估计要12点了！

今日份励志名言：

“非淡泊无以明志，非宁静无以致远。”
——（语出 三国 · 诸葛亮）

这篇关于前端面试知识点—防抖与节流 【小咚“面筋”记】的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/698475。

相关文章

Vue3 的 shallowRef 和 shallowReactive：优化性能

Vue3 的 shallowRef 和 shallowReactive：优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉，那么对 shallowRef 和 shallowReactive 是否了解呢？ 在编程和数据结构中，“shallow”（浅层）通常指对数据结构的最外层进行操作，而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素，而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层（Shallow） 定义
阅读更多...
这15个Vue指令，让你的项目开发爽到爆

这15个Vue指令，让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件，按住 Control 和回车键再显示它吗？小菜一碟： <template
阅读更多...
【 html+css 绚丽Loading 】000046 三才归元阵

【 html+css 绚丽Loading 】000046 三才归元阵

前言：哈喽，大家好，今天给大家分享html+css 绚丽Loading！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介：💡2.外观描述：💡3.使用方式：💡4.战斗方式：💡5.提升：💡6.传说： 📚三、源代码，上代码，可以直接复制使用🎥效果🗂️目录✍️
阅读更多...
【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【课程链接】 AntV G6：深入图形与图形分组、自定义节点、节点动画（下）_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中，应该怎样去计算和绘制图形，如何给一个图形制作不间断的动画，以及在鼠标事件之后产生动画。（有点难，需要好好理解） <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06
阅读更多...
字节面试 | 如何测试RocketMQ、RocketMQ？

字节面试 | 如何测试RocketMQ、RocketMQ？

字节面试：RocketMQ是怎么测试的呢？ 答： 首先保证消息的消费正确、设计逆向用例，在验证消息内容为空等情况时的消费正确性； 推送大批量MQ，通过Admin控制台查看MQ消费的情况，是否出现消费假死、TPS是否正常等等问题。（上述都是临场发挥，但是RocketMQ真正的测试点，还真的需要探讨） 01 先了解RocketMQ 作为测试也是要简单了解RocketMQ。简单来说，就是一个分
阅读更多...
基本知识点

基本知识点

1、c++的输入加上ios::sync_with_stdio(false);  等价于 c的输入，读取速度会加快（但是在字符串的题里面和容易出现问题） 2、lower_bound()和upper_bound() iterator lower_bound( const key_type &key ): 返回一个迭代器，指向键值>= key的第一个元素。 iterator upper_bou
阅读更多...
秋招最新大模型算法面试，熬夜都要肝完它

秋招最新大模型算法面试，熬夜都要肝完它

💥大家在面试大模型LLM这个板块的时候，不知道面试完会不会复盘、总结，做笔记的习惯，这份大模型算法岗面试八股笔记也帮助不少人拿到过offer ✨对于面试大模型算法工程师会有一定的帮助，都附有完整答案，熬夜也要看完，祝大家一臂之力 这份《大模型算法工程师面试题》已经上传CSDN，还有完整版的大模型 AI 学习资料，朋友们如果需要可以微信扫描下方CSDN官方认证二维码免费领取【保证100%免费
阅读更多...
计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

🍊作者：计算机编程-吉哥 🍊简介：专业从事JavaWeb程序开发，微信小程序开发，定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事，生活就是快乐的。 🍊心愿：点赞 👍 收藏 ⭐评论 📝 🍅 文末获取源码联系 👇🏻 精彩专栏推荐订阅 👇🏻 不然下次找不到哟~Java毕业设计项目~热门选题推荐《1000套》 目录 1.技术选型 2.开发工具 3.功能
阅读更多...
Vue3项目开发——新闻发布管理系统（六）

Vue3项目开发——新闻发布管理系统（六）

文章目录 八、首页设计开发1、页面设计2、登录访问拦截实现3、用户基本信息显示①封装用户基本信息获取接口②用户基本信息存储③用户基本信息调用④用户基本信息动态渲染 4、退出功能实现①注册点击事件②添加退出功能③数据清理 5、代码下载 八、首页设计开发 登录成功后，系统就进入了首页。接下来，也就进行首页的开发了。 1、页面设计 系统页面主要分为三部分，左侧为系统的菜单栏，右侧
阅读更多...
【VUE】跨域问题的概念，以及解决方法。

【VUE】跨域问题的概念，以及解决方法。

目录 1.跨域概念 2.解决方法 2.1 配置网络请求代理 2.2 使用@CrossOrigin 注解 2.3 通过配置文件实现跨域 2.4 添加 CorsWebFilter 来解决跨域问题 1.跨域概念 跨域问题是由于浏览器实施了同源策略，该策略要求请求的域名、协议和端口必须与提供资源的服务相同。如果不相同，则需要服务器显式地允许这种跨域请求。一般在springbo
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2