防抖节流面试/笔试题整理
防抖
Q1: 为什么要防抖?/什么是防抖？/了解防抖吗？
防止事件重复触发
例如 ：使用search搜索关键词，用户在不断输入值时，不需要每次输入都进行一次查询，可以等用户输入完再查询。
此时用防抖来节约请求资源。
Q2: 如何防抖？
需要在事件触发后中开启一个定时器。如果再次触发则把定时器设置为0，等定时器到以后再触发。
Q3：口述一个防抖函数？
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title>
</head>
<body><input type="text"><script>let input = document.querySelector("input");let time = null;//time用来控制事件的触发input.addEventListener('input',function(){//防抖语句if(time !== null){// clearTimeout() 方法可取消由 setTimeout() 方法设置的定时操作。// clearTimeout() 方法的参数必须是由 setTimeout() 返回的 ID 值。clearTimeout(time);}time = setTimeout(() => {console.log(this.value);//业务实现语句//这里的this指向的是input},500)})</script>
</body>
</html>
节流
Q1：为什么要节流?/什么是节流？/了解节流吗？
- 节流就是减少流量，将频繁触发的事件减少，并每隔一段时间执行
例如：监听滚动事件，比如是否滑到底部自动加载更多
Q2：如何节流？
- 当事件触发后即关上阀门，接下来触发都不生效。过一段时间后阀门才会开启。
Q3：口述一个节流函数
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><script>var flag = true;window.addEventListener('scroll',function(){if(flag){setTimeout(()=>{console.log(123);flag = true;},2000);}flag = false;});</script>
</body>
<style>body{height: 500vh;}
</style>
</html>
防抖和节流的区别
- 防抖触发高频率事件时n秒后只会执行一次，如果n秒内再次触发，则会重新计算。高频事件触发，每次触发事件时设置一个延迟调用方法。
- 防抖是将多次执行变为最后一次执行，节流是将次执行变成每隔一段事件执行
参考博客：
- https://www.jianshu.com/p/159377741062
- https://blog.csdn.net/baidu_39009276/article/details/123798695
- https://blog.csdn.net/weixin_49592687/article/details/124287056
- https://blog.csdn.net/weixin_49592687/article/details/124356792?spm=1001.2014.3001.5502
- https://blog.csdn.net/weixin_67651040/article/details/123559510
