防抖节流-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_45272615/article/details/135557351


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    防抖：<input type="submit" name="" id="input1">
    节流：<input type="submit" name="" id="input2">
    <script>
        function submit1() {
            console.log('防抖成功');
        }

        function submit2() {
            console.log('节流成功');
        }

        var btn1 = document.getElementById('input1') //防抖
        var btn2 = document.getElementById('input2') //节流
        btn1.addEventListener('click', shake(submit1, 2000), false)
        btn2.addEventListener('click', throttle(submit2, 2000), false)
        //防抖 多次点击事件，只触发最后一次（秒杀活动/搜索栏）
        function shake(fn, delay) {
            // 先定义为空
            let timer = null
            return function () {
                // 如果存在时间 则清空
                clearInterval(timer)
                timer = setTimeout(() => {
                    fn()
                }, delay)
            }
        }
        //节流 在规定时间内 只触发一次（抢红包/监听滚动事件）
        function throttle(fn, delay) {
            let temp = false;
            return function () {
                if (temp) {
                    return
                } else {
                    temp = true
                    setTimeout(() => {
                        // 改变this指向
                        fn.apply(this, arguments)
                        temp = false
                    }, delay)
                }
            }
        }
    </script>
</body>

</html>

防抖 节流

防抖节流