节流小例子

1.防抖是执行最后一次。节流是控制执行的次数,无论你触发多少次,我都是几秒执行一次。
比如滚动条,滚动的时候就触发打印,随便一滚都会触发很多下。

节流的关键是用一个flag,只有定时器函数执行过后,flag才会被设置为true,这个时候才能添加新的定时器。
throttle函数的第一个参数是业务逻辑,第二个参数是延迟。

 <script>
        function roll() {
            console.log("我滚啦")
        }

        function throttle(fn, delay) {
            let flag = true
            return function() {
                if(flag) {
                    setTimeout(()=>{
                        fn.call(this)
                        //定时器到时间了,下一个定时器事件才能创建
                        flag = true
                    }, delay)
                }
                flag = false
            }
        }
        window.addEventListener('scroll', throttle(roll, 1000))
    </script>

你可能感兴趣的:(36道js手写,javascript,html5,vue.js)