节流与防抖节流：用户触发了某事件，若在wait时间内重复触发该事件，则不会执行重复触发的事件。即wait时间内只执行第一

节流：用户触发了某事件，若在wait时间内重复触发该事件，则不会执行重复触发的事件。即wait时间内只执行第一次。典型场景是用户操作滚动条

<html>
    <head>
        <script type="text/javascript">
            
            //获取事件节流器，实际执行的是getData函数,wait为1000毫秒
           let todo = throttler(getData.bind(this,'a','b','c'),1000)

            function handleInput(){
                todo()
            }

            //声明事件节流器
            function throttler(fn,wait){
                let occurTime = null;  //闭包变量，保存第一次触发事件的时间
                return function(){
                    if(!occurTime){
                        occurTime = new Date().getTime()
                        fn()
                        setTimeout(() => { //在wait时间后重置occurTime。即在wait时间内不再重复触发此事件
                            occurTime = null
                        }, wait);
                    }
                }
            }

            function getData(a,b,c){
                console.log(a,b,c,'getData')
            }
        </script>
    </head>
    <body>
        <input value="" onkeyup="handleInput()" type="text">
    </body>
    
</html>

防抖：若用户触发了事件并在wait时间内又触发了该事件，则前一次触发的事件不生效。典型场景是输入查询。

<html>
    <head>
        <script type="text/javascript">
            
           let todo = debouncer(getData.bind(this,'a','b','c'),1000)
           
            function handleInput(){
                todo()
            }

            function debouncer(fn,wait){
                let timer = null;
                //事件触发后，生成一个定时器。若wait时间内再次触发，则清除刚才的定时器再生成一个定时器
                //直到wait时间内没有再触发该事件，则执行事件实例
                return function(){
                    console.log("timer：",timer)
                    if(timer){
                        clearTimeout(timer)
                        timer = null
                    }
                    timer = setTimeout(fn, wait);
                }
            }

            function getData(a,b,c){
                console.log(a,b,c,'getData')
            }
        </script>
    </head>
    <body>
        <input value="" onkeyup="handleInput()" type="text">
    </body>
    
</html>

网上查询资料并自己整理，如有遗漏或错误，欢迎指正。