js防抖与节流

js防抖与节流

防抖与节流的概念

都是为了限制函数的执行频次，以优化函数触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象。

区别

防抖 任务频繁触发的情况下，只有任务触发的间隔超过指定间隔的时候，任务才会执行，它们可以减少不必要的函数调用次数。
节流 指定时间间隔内只会执行一次任务。换句话说，无论函数被触发多少次，它都只会按照预定的间隔执行。

注意

使用节流或者防抖要用到工厂函数（返回新函数的函数），onclick不会触发返回的方法，addEventListener可以正常触发，所以我们要使用addEventListener监听某个按钮来使用。

防抖

<button type="button" id="btn">防抖</button>

<script>
	/**
	 * 任务频繁触发的情况下，只有任务触发的间隔超过指定间隔的时候，任务才会执行；在连续不断的点击时，只会触发一次submitData方法，除非间隔一秒后再次点击，可再次触发submitData方法
	 * */
	let btn = document.getElementById('btn');
	btn.addEventListener('click', debounce(submitData, 1000))

	/**防抖 */
    function debounce(fn,time){

        let t = null;

        return function (){
            if (t){
                clearTimeout(t)
            }

            let f = !t;

            if (f){
                fn();
            }

            t = setTimeout(()=>{
                t = null;
            }, time)
        }
    }

    /**提交数据 */
    function submitData(){
         console.log('提交数据')
     }
</script>

节流

<button type="button" id="throttle">节流</button>

<script>
	/**
	* 指定时间间隔内只会执行一次任务, 在连续不断的点击时，在500毫秒内只调用一次getData方法
	 * */
	let throttle = document.getElementById('throttle');
	throttle.addEventListener('click', throttleFunc(getData, 500))

	/**节流 */
    function throttleFunc(fn, delay){
        let begin = 0;

        return function(){
            let curTime = new Date().getTime();

            if (curTime - begin > delay){
                fn();
                begin = curTime
            }
        }
    }

    function getData(){
        console.log('获取数据')
    }
</script>