js中的防抖(debounce)和节流(throttle)

防抖和节流都是防止用户频繁的触发事件执行，因为频繁的操作DOM，资源就会不断的加载，这样会很耗费性能，很有可能导致界面卡顿，甚至浏览器的崩溃等问题。
那么防抖和节流有什么区别呢

1.防抖(debounce)

防抖就是当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时；比如如果一直移动鼠标（比如10s），会发现在10+1s后才执行，1s就是固定的时间段

应用场景：实时搜索、拖拽、点赞和取消点赞等

防抖主要是利用定时器来实现

function debounce(handle,delay){
	var timer=null
	return function () {
		clearTimeout(timer)
		timer = setTimeout(function () {
		// 开启定时器，定时执行ajax()的内容
			handle.apply(this, arguments)
		}, delay)
	}
}

function ajax() {
	console.log(this.value)
}
var oInp = document.getElementById('inp');
oInp.oninput = debounce(ajax, 1000);

2.节流(throttle)

节流是指当持续触发事件时，保证一定时间段内只调用一次事件处理函数，在大于执行周期才执行，周期内不调用

应用场景：窗口调整、页面滚动、抢购点击等

节流主要利用时间戳实现

function throttle(handle, wait) {
    // 上一次触发事件的时间
    var lastTime = 0
    return function (e) {
        // 当前时间
        var nowTime = new Date().getTime()
        if (nowTime - lastTime > wait) {
            handle.apply(this, arguments)
            // 把当前的时间赋值给最新触发事件的时间
            lastTime = nowTime
        }
    }
}