防抖与节流

 

 

函数防抖

将多次操作合并为一次操作进行。原理是维护一个计时器，规定在delay时间后触发函数，但是在delay时间内再次触发的话，就会取消之前的计时器而重新设置。这样一来，只有最后一次操作能被触发。

函数节流

当持续触发事件时，保证在一定时间内只调用一次事件处理函数，意思就是说，假设一个用户一直触发这个函数，且每次触发小于既定值，函数节流会每隔这个时间调用一次

 

<!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>
    <button id="btn1">防抖点击</button>
    <button id="btn2">节流点击</button>
</body>
<script type="text/javascript">
    var btn1 = document.getElementById("btn1");
    var btn2 = document.getElementById("btn2");

    btn1.onclick = debounce(send,1000)
    btn2.onclick = throttle(send,1000)

    // 防抖debounce
    function debounce(fn,delay) {
        var timeout = null;     // 创建一个标记用来存放定时器的返回值
        return function (e) {
            // 每当用户输入的时候把前一个 setTimeout clear 掉
            clearTimeout(timeout); 
            // 然后又创建一个新的 setTimeout, 这样就能保证interval 间隔内如果时间持续触发，就不会执行 fn 函数
            timeout = setTimeout(() => {
                fn.apply(this, arguments);
            }, delay);
        };
    }
    
            
    // 节流throttle
    function throttle(fn,delay) {
        let run = true; // 通过闭包保存一个标记
        return function () {
            // 在函数开头判断标记是否为true，不为true则return
            if (!run) return;
            // 立即设置为false
            run = false;
            // 将外部传入的函数的执行放在setTimeout中
            setTimeout(() => { 
            // 最后在setTimeout执行完毕后再把标记设置为true(关键)表示可以执行下一次循环了。
            // 当定时器没有执行的时候标记永远是false，在开头被return掉
                fn.apply(this, arguments);
                run = true;
            }, delay);
        };
    }

    // 提交
    function send() {
        console.log('发送请求');
    }
        
</script>
</html>

 

posted @ 2022-03-22 15:44  超级酸  阅读(24)  评论(0)  编辑  收藏  举报