《前端面试题》- JS基础

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

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

防抖

防抖(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>