怎么在vue中用函数防抖和函数节流

函数防抖

<div>
  <button @click="click">点我进行函数防抖</button>
</div>

script标签下定义一个函数

function throttle (method) {
     
  clearTimeout(method.timer)
  method.timer = setTimeout(function () {
     
    method.call()
  }, 1000)
}

methods里面调用它们

click () {
     
 throttle(this.doSomething)
},
doSomething () {
     
  console.log('在这里进行防抖操作')
},

然后连续点击多次，只生效最后一次

函数节流

还是上面的例子

<div>
  <button @click="click">点我进行函数防抖</button>
</div>

直接在mothods里面写

bbb () {
  this.doSomething()
 },
 doSomething () {
   var _timer = ' '
   if (_timer) {
     return
   }
   _timer = setTimeout(function () {
     console.log('这里进行节流操作')
     clearTimeout(_timer)
     _timer = ''
   }, 1000)
 },

管你点多少下，我一秒只生效一次。

再加一个怎么在js中实现的方式吧。

防抖：

function debounce() {
      
    let timeId = null;
    return function() {
     
        if(timeId) {
     
            clearTimeout(timeId);
        }
        timeId = setTimeout(() => {
     
           console.log('这里操作')
        }, 1000)
    }
}
window.onresize = debounce()

节流：

function jie() {
      
    let timeId = null;
    return function() {
     
        if(timeId) {
     
            return;
        }
        timeId = setTimeout(() => {
     
           console.log('这里操作')
           timeId = null
        }, 1000)
    }
}

window.onresize = jie()