js学习-节流函数

节流函数

当持续触发事件的时候保证一段时间内只调用一次事件处理函数,一段时间内只做一件事情。
代码：

<button id="button">点击</button>
    <script>
        function throttle(callback, wait) {
            let timeout;
            let startTime = new Date();
            return function () {
                clearTimeout(timeout);
                let curTime = new Date();
                if (curTime - startTime <= wait) {
                    //小于规定时间间隔时，用setTimeout在指定时间后再执行
                    timeout = setTimeout(() => {
                        callback();
                    }, wait)
                } else {
                    //重新计时并执行函数
                    startTime = curTime;
                    callback()
                }
            }
        }
        //事件处理程序
        function realFunc() {
            console.log('success')
        }
        document.getElementById('button').onclick = throttle(realFunc, 1000);
    </script>