节流throttle == 技能CD

技能cd，在一段时间内只能被触发一次
image.png
节流：使高频触发的事件转换为低频触发

应用

  1. window.onresize
  2. onscroll
  3. 一些活动的高频点击，并不要真的一直向后台发送请求

    代码思路

    1. 需要一个函数 
    2. 入参：需要执行的方法，执行的时间间隔
    3. 函数需要实现，在传入时间内，只执行一次
    ```javascript function throttle(func,delay){ let lock = true return function(){ if(!lock){
    1.  return
    } lock = false setTimeout(()=>{ lock = true func() },delay) } }
  1. 调用
  2. ```javascript
  3. let executeFunc = function(){
  4.     console.log('executing')
  5. }
  6. setInterval(throttle(executeFunc,1000),1)

防抖debounce == 回城

回城加血，不能被打断，打断就要重新开始
image.png

防抖：防止误操作（手抖操作）导致的多次触发，转换为最后一次触发

应用

  1. 搜索联想
  2. 按钮

    代码

    1. function debounce(func,delay){
    2. let timer;
    3. return function(){
    4.  clearTimeout(timer)
    5.  timer = setTimeout(()=>{
    6.    func()
    7.    },delay)
    8. }
    9. }
    调用
    1. function showTop  () {
    2.  var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
    3. 　　console.log('滚动条位置：' + scrollTop);
    4. }
    5. window.onscroll = debounce(showTop,1000)