前端面试准备--手写代码--防抖和节流

Planetlll_hh

已于 2022-07-05 11:19:43 修改

阅读量1.6k

点赞数

分类专栏：前端面试--手写代码文章标签：前端 javascript

于 2022-03-12 13:31:56 首次发布

本文链接：https://blog.csdn.net/m0_61066898/article/details/123442133

版权

前端面试--手写代码专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1、防抖（debounce）

目的：避免用户多次触发事件，导致事件处理程序响应过快而产生抖动感。
实现方法：触发事件时，利用定时器让事件处理程序在一段时间后执行。与此同时，在事件处理程序前若再次触发事件，则取消前一次的定时任务。
实现代码

<!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">
</body>
<script>
    // output是业务处理函数
    function output() {
        console.log(this.value);
    }
    // 这里的具体应用场景是防止用户输入文本框时,触发keyup事件过快而多次执行output函数
    function decounce(fn, delay) {
        let timer;
        return function (...args) {
            // 如果有定时器，取消定时器任务
            if (timer) {
                clearInterval(timer)
            }
            // 每次触发事件都会生成定时器，在一段时间后调用事件处理程序
            timer = setTimeout(() => {
                fn.apply(this, args)

            }, delay)
        }
    }
    const inp = document.querySelector('input');
    // 绑定事件
    inp.addEventListener('keyup', decounce(output, 500));
</script>

</html>

2、节流(throttle)

目的与节流差不多。
与防抖区别：防抖是只执行最后一次触发的事件，而节流是控制执行次数。
代码实现

<!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>
    <style>
        body {
            height: 2000px;
        }
    </style>
</head>

<body>

</body>
<script>
    function throttle(func, wait) {
        let timer = null;
        return function () {
            if (!timer) {
                // 这个判断的意思就是如果当前没有定时器任务则可以让用户触发事件生成定时器任务
                timer = setTimeout(() => {
                    // 只有当当前定时器任务执行完，将timer设置为null时,用户触发的事件才会再一次生成定时器任务
                    timer = null;
                    func.apply(this, arguments)
                }, wait)
            }

        }
    }
    /*正常事件监听*/
    document.addEventListener('mousemove', throttle(function (e) {
        console.log(e.offsetX);
    }, 500))
</script>

</html>

Planetlll_hh

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端面试准备--手写代码--防抖和节流

1、防抖（debounce）目的：避免用户多次触发事件，导致事件处理程序响应过快而产生抖动感。实现方法：触发事件时，利用定时器让事件处理程序在一段时间后执行。与此同时，在事件处理程序前若再次触发事件，则取消前一次的定时任务。实现代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible
复制链接

扫一扫