面试如何快速手搓JavaScript防抖和节流

我叫张永宽@

于 2021-10-24 20:05:54 发布

阅读量119

点赞数 1

分类专栏： JavaScript 文章标签： javascript 面试前端 1024程序员节

本文链接：https://blog.csdn.net/weixin_44051639/article/details/120923604

版权

为什么需要防抖和节流
- 在进行窗口的resize, scroll , 输入框内容校验等操作的时候,如果事件处理函数调用的频率无限制 , 会加重浏览器的负担 , 导致用户的体验非常糟糕
- 在进行网络请求的时候 , 点击事件 , 输入框值改变的时候 , 都需要发送网络请求 , 如果不进行处理的话 , 一直发送网络请求 , 会加重浏览器和服务器的负担
防抖
- 将几次的多次触发的操作合并为一次操作进行
- 防抖原理
  - 原理是维护一个计时器 , 规定在delay事件后触发函数,但是在一定时间内再次触发的话 , 就会取消之前的计时器而重新设置. 这样一来 , 只有最后一次操作能被触发
  - 上述为简单的防抖操作 , 而如果想第一次触发的时候直接执行 , 连续触发的时候只执行一次 , 需要进行判断 , 但这个时候执行的操作并不是最后一次
- ```
<body>
        <input type="text" />
        <script>
            // 这种方式this和事件对象都没进行处理 , 只是简单的进行防抖操作
            let inp = document.querySelector('input');
            inp.addEventListener('input', debpunce(inpVal, 1000), false);
            function inpVal(e) {
```

关注

专栏目录