函数防抖和节流

1、函数防抖，在一定时间段不断触发，只会执行最后一次的函数

<body>
    <button id='btn'>点击</button>
    <script>
        //函数防抖，在一定时间段不断触发，只会执行最后一次的函数

        function debounce(fn) {
            let timer = null;
            return function () {
                clearTimeout(timer)
                timer = setTimeout(() => {
                    fn.call(this,arguments[0]);
                }, 1000);
            }
        }
        let btn = document.querySelector('#btn');
        btn.onclick = debounce(print)

        function print(e) {
            console.log(e)
        }
    </script>
</body>

2、函数节流，在一定时间段触发，就像去超市买东西，老板决定超市在星期一到星期天中打折一次，员工只能每个星期打折一次，不能多次打折

<body>
    <button id='btn'>点击</button>
    <script>
        //函数节流，在一定时间段多次点击只触发一次
        function throttle(fn) {
            let flag = false;
            return function () {
                if (flag) {
                    return
                }
                flag = true
                setTimeout(() => {
                    fn.call(this, arguments[0])
                    flag = false
                }, 1000);
            }
        }
        let btn = document.querySelector('#btn');
        btn.addEventListener('click', throttle(print))

        function print(e) {
            console.log(e)
        }
    </script>
</body>

　　

posted on 2021-01-25 11:34  随心的博客  阅读(107)  评论(0)    收藏  举报