var count = 1
var container = document.getElementById("container")
function getUserAction(e) {
container.innerHTML = count ++
console.log(this)
console.log(e)
return count
}
//1.x
// function throttle(func, wait) {
// var previous = 0
// return function() {
// var args = arguments
// var now = +new Date()
// if(now - previous > wait) {
// func.apply(this, args)
// previous = now
// }
// }
// }
//2.x
// function throttle(func, wait) {
// var timeout
// return function() {
// var args = arguments
// if(!timeout) {
// timeout = setTimeout(() => {
// func.apply(this, args)
// timeout = null
// }, wait)
// }
// }
// }
//3.x
// function throttle(func, wait) {
// var previous = 0
// var timeout
// return function() {
// var args = arguments
// var now = +new Date()
// var remaining = wait - (now - previous)
// if(remaining <=0 || remaining > wait) {
// if(timeout) {
// clearTimeout(timeout)
// timeout = null
// }
// previous = now
// func.apply(this, args)
// }else if(!timeout){
// timeout = setTimeout(() => {
// func.apply(this, args)
// timeout = null
// previous = +new Date()
// }, remaining)
// }
// }
// }
// container.onmousemove = throttle(getUserAction, 3000)
//4.x
//options:
//leading: false : disable the first action
//tailing: false : disable the last action
function throttle(func, wait, options) {
var timeout
var previous = 0
var ops = options || {}
var throttled = function() {
var args = arguments
var now = +new Date()
if(!previous && !ops.leading) {
previous = now
}
var remaining = wait - (now - previous)
if(remaining <=0 || remaining > wait) {
if(timeout) {
clearTimeout(timeout)
timeout = null
}
previous = now
func.apply(this, args)
}else if(!timeout && ops.trailing) {
timeout = setTimeout(() => {
func.apply(this, args)
timeout = null
previous = +new Date()
}, remaining)
}
}
throttled.cancel = function() {
clearTimeout(timeout)
previous = 0
timeout = null
}
return throttled
}