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

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

文章目录

前言
一、防抖和节流的应用场景
二、防抖（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秒的时延主要是为了能更加直观的感受到防抖和节流的效果。

滚动条事件测试

		//监听浏览器滚动条触发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上面的代码自行测试感受效果。

按钮事件测试

		//防抖按钮对比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("鼠标移动正常触发！");})

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

五、源代码（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点了！

今日份励志名言：