<div>

<input type=”text” id=”unDebounce”>

</div>

<div>

<input type=”text” id=”debounce”>

</div>

<div>

<input type=”text” id=”throttle”>

</div>

</div>

var elem1 = document.getElementById(“unDebounce”)

var elem2 = document.getElementById(“debounce”)

var elem3 = document.getElementById(“throttle”)

// 不防抖

function ajax1(value){

console.log(“不防抖，不节流”)

console.log(value)

}

elem1.addEventListener(‘keyup’,function (e) {

ajax1(e.target.value);

})

// 防抖

function ajax2(value) {

console.log(value)

}

function debounce(func,delay){

console.log(“函数防抖”)

let timer = null;

return function(…args){

if(timer){

console.log(“清除定时器”)

clearTimeout(timer)

}

timer = setTimeout(()=>{

console.log(“重新计时”)

func.call(this,…args)

},delay)

}

}

let debounceFn = debounce(ajax2,1000)

elem2.addEventListener(‘keyup’,function (e) {

debounceFn(e.target.value);

})

// // 节流

function ajax3(value){

console.log(value)

}

function throttle(func,delay){

console.log(“函数节流”)

let lastTime = 0;

let timer = null;

return function (…args) {

let flag = false ; // 还没发送数据

let now = +new Date().getTime();

if(timer){

clearTimeout(timer)

}

if(now-lastTime>=delay){

console.log(“当前时间大于设定时间，开始执行函数”)

func.apply(this,args)

console.log(“time1”,new Date().getTime())

lastTime = now;

flag = true; // 发送了数据

}else{

timer = setTimeout(()=>{

if(!flag){ // 如果没有发送数据成功，再走这个，兜底发送请求

func.apply(this,args)

console.log(“time2”,new Date().getTime())

}

},delay-(now-lastTime)+1000) // setTimeout多一些，优先执行周期性请求

}

}

}

let throttleFn = throttle(ajax3,5000)

elem3.addEventListener(‘keyup’,function (e) {

throttleFn(e.target.value);

})