节流函数

原理：周期性定时器

1
2
3
4
5
6
7
8
9
10
11
var run = true;
window.onresize = () => {
  if(!run){
    return
  }
  run = false
  setTimeout(() => {
    console.log('函数节流...')
    run = true
  }, 1000)
}

防抖函数

事件触发没有结束是不会执行的，只有在事件触发结束后延迟执行一次

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function f(){
  console.log('onresize...')
}

function debounce(fn, delay){
  var handle
  return () => {
    clearTimeout(handle)
    handle = setTimeout(() => {
      fn()
    }, delay)
  }
}

window.addEventListener('resize', debounce(fun, 500))

总结：

1.防抖函数和节流函数都是用来提升性能优化及用户体验的一种方案；
2.防抖函数只会执行一次，且是最后触发的那一次，而节流函数会规律性的执行多次；