防抖

防抖防抖防止手抖

就是在某段时间内触发多次事件，只执行最后一次。

例如百度搜索联想，只会联想最后输入的字符

function resizeEvent (content) {  console.log(`window`+content)}let event = debounce(resizeEvent, 500)function debounce(func, delay) {  let timeOut = null  return (args) => {    if (timeOut !== null) {      // 清除上一次定时器，重新计时      clearTimeout(timeOut)    }    timeOut = setTimeout(() => {      func(args)    }, delay)  }}// 调整浏览器窗口大小时，触发事件addEventListener('resize', ()=>{event(1)})

应用：

1.search联想，在用户不断输入值的时候，节约请求资源，确保联想正确

2.window resize事件，防抖让其只触发一次

节流

在一段时间内触发多次事件，函数在每一个间隔时间后执行一次。

例如 fps游戏中一直按着鼠标，冲锋枪子弹按照一定速度连发

function resizeEvent (content) {  console.log(`window`+content)}let event = throttle(resizeEvent, 500)function throttle(func, delay) {  let last = null  let deferTimer = null  return (args) => {    let now = new Date().getTime()    if (last && now < last + delay) {     // 未到间隔时间，清除定时器      clearTimeout(deferTimer)      deferTimer = setTimeout(()=> {      // 重新新建定时器，等待间隔时间以后置位last，执行功能函数        last = now        func(args)      }, delay)    } else {      // 第一次或者已超过间隔时间      last = now      func(args)    }  }}// 调整浏览器窗口大小时，触发事件addEventListener('resize', ()=>{event(1)})

应用：

1.鼠标不断点击触发某功能，mousedown(单位时间内只触发一次)

2.鼠标不断移动触发某功能，mousemove(单位时间内只触发一次)