关于js的防抖和节流

啥是防抖啥是节流??
在JS中有时候我们会不经意的去频繁地触发一些事件,比如说onmouseover和onscroll,我明明只想触发一次,但是他好像被触发了n次,想想看,如果我们在这些事件中有发送请求去操纵数据库,那对于后台来说是多么可怕的消耗啊.
而所谓防抖和节流就是用来解决这个问题的

防抖

事件只有在n秒内不被触发才会再次执行
它会有一个执行的时间,规定时间内如果你再次去触发了,那么会重新开始计时,怎么实现呢?

        const inputa = document.getElementById('unDebounce')

        let timeId
        function debounce(content) {
            clearTimeout(timeId)
            timeId = setTimeout(() => {
                console.log('ajax request' + content)
            }, 1000);
        }

        inputa.addEventListener('keyup', (e) => {
            debounce(e.target.value)
        })

实现的原理是, 当你每次去触发事件的时候,都会清理掉上一个计时器,重开一个计时器,如果你的触发时间小于计时器的等待时间,他就一直都不会执行,重新计时

节流

n秒内无论函数被触发多少次,都只执行一次

        const inputb = document.getElementById('throttle')
        
        let last, timerId
        function throttle(content){
            let now = +new Date()
            if(last && now<last+1000){
                clearTimeout(timerId)
                timerId = setTimeout(() => {
                    last = now
                    console.log('ajax request'+content)
                }, 1000);
            }else{
                last = now
                console.log('ajax request'+content)
            }
        }

        inputb.addEventListener('keyup', (e) => {
            throttle(e.target.value)
        })

实现原理是,一定时间内你去触发这个事件,它也是清理上一个计时器,不停的去清理上一个计时器,直到不满足条件去执行else条件里面的打印,最后剩的没有被清除掉的那个计时器也会在单位时间后被打印