【面试题】防抖与节流（最基本的写法）

最新推荐文章于 2024-04-27 15:50:25 发布

@Dai

最新推荐文章于 2024-04-27 15:50:25 发布

阅读量584

点赞数

分类专栏：前端面试题文章标签： javascript 前端 vue.js ajax html

本文链接：https://blog.csdn.net/weixin_46318413/article/details/121861426

版权

前端面试题专栏收录该内容

22 篇文章 2 订阅

订阅专栏

是什么？

防抖和节流是限制函数执行次数的两种方法，主要应用于Ajax请求。

为什么？

当我们通过按钮进行ajax请求时，会出现连续点击多次按钮，就会重复请求多次ajax，这样子会影响用户的体验效果，也会对服务器造成一定的影响。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>防抖与节流</title>
</head>

<body>
    <input type="text" id="input">
    <script>
        let input = document.getElementById("input");
        let span = document.createElement('span');
        let num = 0;
        input.addEventListener("input", inputEvent)
        //输入事件
        function inputEvent(e) {
            console.log(e, this)
            num++;//记录请求次数
            span.innerHTML = `<p>第${num}次请求了接口</p>`;
            document.body.appendChild(span);
        }
    </script>
</body>

</html>

如果你在1秒内输入123，那它就会在1秒内分别执行输入1、2、3时的事件。

如何使用？

一、防抖：通过设置setTimeout的方式，在一定的时间间隔内，将多次触发变成一次触发。

使用场景：登录、发短信等按钮避免用户点击太快，导致发送了多次请求，需要防抖。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>防抖与节流</title>
</head>

<body>
    <input type="text" id="input">
    <script>
        let input = document.getElementById("input");
        let span = document.createElement('span');
        let num = 0;
        input.addEventListener("input", debounce(inputEvent, 200))
        //输入事件
        function inputEvent(e) {
            console.log(e, this)
            num++;//记录请求次数
            span.innerHTML = `<p>第${num}次请求了接口</p>`;
            document.body.appendChild(span);
        }
        //防抖
        function debounce(fn, delay) {
            //这里相当于定义了一个全局的timer
            let timer = null;
            return function () {
                //如果定时器存在，那就清掉，开启新的计时器
                if (timer) {
                    clearTimeout(timer)
                }
                timer = setTimeout(() => {
                    fn.apply(this, arguments);
                }, delay);
            }
        } 
    </script>
</body>

</html>

如果你在200ms内输入123，那它只会执行输入3时的事件。

二、节流：在一段时间内，只执行一次某个操作，减少一段时间的触发频率。

使用场景：浏览器input搜索框展示下拉列表，需要节流，也可以使用防抖。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>防抖与节流</title>
</head>

<body>
    <input type="text" id="input">
    <script>
        let input = document.getElementById("input");
        let span = document.createElement('span');
        let num = 0;
        input.addEventListener("input", throttle(inputEvent, 1000))
        //输入事件
        function inputEvent(e) {
            console.log(e, this)
            num++;//记录请求次数
            span.innerHTML = `<p>第${num}次请求了接口</p>`;
            document.body.appendChild(span);
        }
        //节流
        function throttle(fn, delay) {
            //相当于在全局定义了一个timer
            let timer = null;
            return function () {
                //如果timer存在，直接结束函数
                if (timer) {
                    return
                }
                timer = setTimeout(() => {
                    fn.apply(this, arguments);
                    //指定时间结束后，将timer变成null，否则这个函数将一直不执行
                    timer = null
                }, delay);
            }
        }
    </script>
</body>

</html>

如果你在一秒内输入123，那它只会执行输入1时的方法。

@Dai

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
【面试题】防抖与节流（最基本的写法）

是什么？防抖和节流是限制函数执行次数的两种方法，主要应用于Ajax请求。为什么？当我们通过按钮进行ajax请求时，会出现连续点击多次按钮，就会重复请求多次ajax，这样子会影响用户的体验效果，也会对服务器造成一定的影响。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" con
复制链接

扫一扫