节流函数--入门理解

节流函数–入门理解

简单理解：一段时间内只做一件事情。事件持续被触发时，在一段时间内，只调用一次事件处理函数。

//点击按钮，打印数字1（1s钟内，无论点击多少次，只打印一次）
function thro(func,wait){
        let timer
        return function(){
            // 形成闭包
            if(!timer){
                timer=setTimeout(function(){
                    func()
                    timer=null
                },wait)
            }
        }
    }
    function func(){
        console.log(1)
    }
    document.querySelector('button').onclick=thro(func,1000)

上述代码中，当一个定时器过了1s后，timer会置为null，之后timer为null，才会再次进入if语句，开启下一个定时器。也就是说，一秒钟之内，无论点击多少次，都只开启了一个定时器。

节流与防抖的区别
前边简单介绍了一下防抖函数，与节流函数相比，二者都是在限制事件的执行频率，不同点在于，防抖函数是在每次操作完的最后一步执行事件，只执行最后的那一次，而节流函数则是规定在一段时间内只执行一次事件。
比如：防抖函数可以用在搜索框输入，只有用户输入完内容时，才会执行某事件，而不是在敲下每个字符的时候都触发事件。
节流函数可以用在表单提交，防止用户多次点击按钮，重复提交表单。