函数防抖与节流

函数防抖与节流

在js中，用户频繁触发事件 对DOM处理造成性能消耗。

防抖：短时间内多次触发同一事件,会重新开始计时，直到等待时长到达后执行一次

	//简单封装防抖函数
	  function debounce(callback) {
	  		//定义变量来接收事件开启的定时器
            var timer = null;
            return function () {
            	//记录当前的this
                var _this = this
                //清除上一次事件开启的定时器
                clearTimeout(timer)
                //接收当前事件开启的定时器
                timer = setTimeout(() => {
                	//定时器时间一到改变回调函数this指向执行函数
                    callback.call(_this)
                }, 1000);
            }
        }

节流：一个事件的触发 ，一段时间内只仅触发一次

		//利用时间戳简单实现
	    function throttle(callback,delay) {
            //接收上一次事件执行完时变化的时间戳
            var lastTime = 0;
            return function () {
                //获取当前触发事件的时间戳
                var nowTime = new Date()
                //间隔时间是否到了
                if (nowTime - lastTime > delay) {
                    //执行回调
                    callback()
                    //记录当前时间戳
                    lastTime = nowTime
                }
            }
        }

防抖与节流的区别

防抖：短时间内多次触发，最终在停止触发后的某个指定时间执行一次函数（只执行一次）

节流：短时间内多次触发，即使事件触发仍在继续，但也可以根据指定时间触发一次函数（至少执行一次）