前端面试笔记6：防抖和节流

最新推荐文章于 2024-10-07 21:26:45 发布

勿忘☆初心

最新推荐文章于 2024-10-07 21:26:45 发布

阅读量258

点赞数

文章标签：前端面试 javascript

本文链接：https://blog.csdn.net/qq_52287721/article/details/122225058

版权

防抖和节流

文章目录

防抖和节流

什么是防抖和节流

防抖或是节流的含义是我们要通过某种方式去减少当前函数的执行次数。

函数防抖：在事件被触发 n 秒后再执行回调，如果在这 n 秒内事件又被触发，则重新计时。

函数节流：规定一个单位时间，在这个时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。

防抖的实现方式

这里不多说，直接上代码：

<!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>Document</title>
</head>

<body>
    <input type="text">
    <input type="submit" id="input">

    <script>
        var btn = document.getElementById('input');

        btn.addEventListener('click', debounce(submit, 2000), false);

        function submit(e) {
            // console.log(e);
            // console.log(this);
            console.log(1);
        }

        // 通过防抖的方式实现
        function debounce(fn, timer) {

            // 定义记录计时器的变量 t
            var t = null;
            return function () {
                // console.log(arguments[0]);

                var firstClick = !t;

                // 只要计时器 t 是存在的，那么我们就将这个计时器清掉
                if (t) {
                    clearTimeout(t);
                }

                // 当计时器 t 为 null 的时候我们认为是第一次调用
                if (firstClick) {
                    fn.apply(this, arguments);
                }

                t = setTimeout(() => {
                    t = null;
                }, timer);

            }

        }
    </script>
</body>

</html>

节流的实现方式

实现的代码如下：

<!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>Document</title>
</head>

<body>
    <input type="text">
    <input type="submit" id="input">

    <script>
        var btn = document.getElementById('input');

        btn.addEventListener('click', throttle(submit, 2000), false);

        function submit(e) {
            // console.log(e);
            // console.log(this);
            console.log(1);
        }

        // 通过节流的方式实现
        function throttle(fn, delay) {

            // 设置一个初始时间
            var begin = 0;

            return function () {

                // 获取到执行函数的毫秒时间戳
                var cur = new Date().getTime();

                // 判断此时点击的时间和上一次点击的时间，如果两者之差大于 delay 的时间，那么才执行
                if (cur - begin > delay) {
                    fn.apply(this, arguments);

                    // 执行完之后，更新 begin 的时间
                    begin = cur;
                }
            }
        }
    </script>
</body>

</html>