《前端面试题》- JS基础 - 防抖和节流

最新推荐文章于 2024-05-17 00:58:42 发布

全栈道

最新推荐文章于 2024-05-17 00:58:42 发布

阅读量563

点赞数 6

文章标签：前端 javascript vue.js html5 html

本文链接：https://blog.csdn.net/iotzzh/article/details/124818739

版权

本文介绍了在网页开发中如何通过防抖和节流技术来解决过度频繁的事件触发问题，如点击、滚动和输入校验，以减轻浏览器负担并提升用户体验。防抖在一段时间无新触发时执行，而节流则确保在设定时间内只执行一次事件处理函数。

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

在界面触发点击，滚动，输入校验等事件时，如果对事件的触发频率不加以限制，会给浏览器增加负担，且对用户不友好。防抖和节流就是针对类似情况的解决方案。

防抖

防抖(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>
    <div>点击<span class="count">0</span>次</div>
    <button class="button">button</button>
    <script>
        let count = 0;
        function debounce(fn, await) {
            let timer = null;
            return function(...args) {
                if(timer) clearTimeout(timer);
                timer = setTimeout(() => fn.apply(this, args), await);
            }
        }

        function calCount() {
            const ele = document.getElementsByClassName('count')[0];
            count++;
            ele.innerHTML = count;
        }

        const btn = document.getElementsByClassName('button')[0];
        btn.addEventListener('click', debounce(calCount, 1000));
    </script>
</body>
</html>

节流

节流(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>
</head>
<body>
    <div>点击<span class="count">0</span>次</div>
    <button class="button">button</button>
    <script>
        let count = 0;
        function throttle(fn, await) {
            let preTime = Date.now();
            return function(...args) {
                let now = Date.now();
                if(now - preTime >= await) {
                    fn.apply(this, args);
                    preTime = Date.now();
                }
            }
        }

        function calCount() {
            const ele = document.getElementsByClassName('count')[0];
            count++;
            ele.innerHTML = count;
        }

        const btn = document.getElementsByClassName('button')[0];
        btn.addEventListener('click', throttle(calCount, 1000));
    </script>
</body>
</html>