防抖和节流

防抖和节流

防抖

防抖： n 秒后在执行该事件，若在 n 秒内被重复触发，则重新计时

	// 防抖：用户触发时间过于频繁，只要最后一次事件的操作
       let inp = document.querySelector('input');
       let timer = null;
       inp.oninput = function(){
           if(timer !== null){
               clearTimeout(timer)
           }
           timer = setTimeout(() => {
            console.log(this.value);
           }, 1000);
       }

防抖【debounce】

	let inp = document.querySelector('input');
    // 当input输入内容的时候执行，然后调用debounce
    inp.oninput = debounce(function(){
        // 此处的this是window
        console.log(this.value);
    },500)

    // 定义一个防抖的函数
    function debounce(fn,delay){
        let timer = null;
        return function(){
            if(timer !== null) {
                clearTimeout(timer);
            }
            timer = setTimeout(()=>{

                fn.call(this);
            },delay)
        }
    }

节流

节流: n 秒内只运行一次，若在 n 秒内重复触发，只有一次生效

		//节流：控制执行次数
        // 控制高频时间执行次数
        let flag = true;
        window.onscroll = function(){
            if (flag) {
                setTimeout(()=>{
                    console.log('节流了！');
                    flag = true;
                },500)
            }
            flag = false;
        }

节流【throttle】

 		window.onscroll = throttle(function(){
            console.log('节流了！');
        },500)

        function throttle(fn,delay){
            let flag = true;
            return function(){
                if (flag) {
                    setTimeout(()=>{
                        fn.call(this);
                        flag = true;
                    },delay)
                }
                flag = false
            }
        }