debounce(防抖)和throttle(节流)

最近由于项目为了修复快速双击发送两次请求得BUG，应用了vue中的debounce，对于其实现产生了一点好奇，于是学习了关于debounce和throttle的一些具体实现方法，具体内容参考http://www.cnblogs.com/fsjohnhuang/p/4147810.html ^_^肥子John，其中有详细细节，以及underscore v1.7.0中实现debounce和throttle的源码和解析

 

debounce，防抖，具体作用是在调用经过防抖处理的函数时，会经过一定的时间之后再执行，如果在此事件段内，再次执行这个函数，那么这个时间会刷新，只有在时间段内没有函数执行的动作之后，这个函数才会执行一次，用文中的举例来说，就像是一个弹簧，在弹簧恢复到原状之前，一直按压，弹簧都不会恢复到原状，只有不按他，那么弹簧就会恢复到原状一次。

debounce的一个简单实现

var debounce = function(idle, action){
  var last
  return function(){
    var ctx = this, args = arguments
    clearTimeout(last)
    last = setTimeout(function(){
        action.apply(ctx, args)
    }, idle)
  }
}

 

throttle，节流，这是一个在文章中学到的概念，具体作用是在调用经过节流处理的函数时，在固定的一段时间内，这个函数只会执行一次，这个概念与debounce不一样，debounce会刷新这个等待时间，而throttle不会，用文中的举例来说，就像是一个滴水的水龙头，固定的周期时间内只会滴下一滴水，不管在固定周期时间内执行了多少次函数

throttle的一个简单实现

var throttle = function(delay, action){
  var last = 0

　return function(){
    var curr = +new Date()
    if (curr - last > delay){
      action.apply(this, arguments)
      last = curr //时间到了才会更新一次last

    }
  }
}

 

debounce和throttle能够有效的减少一些没有必要的请求和操作，以及防止一些重复提交操作(在后台没有设置token的情况下)，能够有效的进行性能的优化和减少服务器压力以及防止一些错误操作