春招冲刺（一）：防抖节流面试/笔试题整理

AAliuxiaolei

已于 2023-03-01 11:47:25 修改

阅读量174

点赞数

文章标签：面试 javascript 前端

于 2023-02-28 18:57:35 首次发布

本文链接：https://blog.csdn.net/AAliuxiaolei/article/details/129267593

版权

文章详细介绍了防抖和节流的概念，以及它们在实际场景中的应用，如搜索关键词输入和页面滚动事件处理。防抖通过限制事件的最终执行次数，避免频繁请求，而节流则确保事件在设定的时间间隔内均匀执行。同时，提供了防抖和节流的代码示例，帮助理解其工作原理。

摘要由CSDN通过智能技术生成

防抖节流面试/笔试题整理

防抖

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