防抖和节流的区别及用法

防抖： 当事件被触发时，设定一个周期延迟执行动作，若期间又被触发，则重新设定周期，直到周期结束，执行动作
特点：

• 持续的触发但不执行函数；
• 最后一次触发完毕后隔一段时间只执行一次该函数；

缺点：

• 如果事件在规定的时间间隔内被不断的触发，则调用方法会被不断的延迟

export function debounce(fn, datatwo) {
    var datatwo= datatwo || 200;
    var timer;
    return function () {
    	var th=this
        var args = num;
        clearTimeout(timer)
     	timer=setTimeout(function() {
        	fn.apply(th,args)
     	},datatwo )
    };
}

节流： 固定周期内，只执行一次动作，若有新事件触发，不执行。周期结束后，又有事件触发，开始新的周期
特点：

• 持续频繁触发但不会按照触发频次执行；
• 持续触发：指按照设定的间隔时间执行，执行是多次的，达到节制频率的作用；

缺点：

• 固定周期内，只执行一次动作，若有新事件触发，不执行。周期结束后，又有事件触发，开始新的周期

export function throttle(fn, data) {
    var last,timer;
    var data= data|| 200;
    return function () {
    	var th=this
        var args = num;
		if(!timer) {
            timer=setTimeout(function() {
                timer=null;
                fn.apply(th,data)
            },data)
       }
    }
}

区别： 函数节流不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数，而函数防抖只是在最后一次事件后才触发一次函数。 比如在页面的无限加载场景下，我们需要用户在滚动页面时，每隔一段时间发一次 Ajax 请求，而不是在用户停下滚动页面操作时才去请求数据。这样的场景，就适合用节流技术来实现。