函数防抖和节流

DOM操作(onresize, onscroll….等等操作),有的的时候会多次触发,为了减少操作,从而有了节流的概念。

函数节流的思想很简单:在每次出发的时候我们就开一个定时器,将DOM操作延迟,然后在下一次事件触发的时候,我们把这个定时器关掉,我们开关定时器,一直到一定的时机在触发事件。

javasscript 高级程序设计中的方法

function throttle (fn, context) {
  fn.tId && clearTimeout(fn.tId)

  fn.tId = setTimeout((() => {
    fn.call(context)
  }, 500)
}
// 很简单进入函数则清除定时器,重新创建一个定时器,然后把定时器id设置为fn,做缓存,等到用户事件不触发,500毫秒以后执行事件,并通过call修改执行this指向

网上流行的方法

function throttle (fn, delay) {
  var timer = null;
  return function () {
    var context = this,
        args = arguments;
    clearTimeout(timer)

    timer = setTimeout(() => {
      fn.apply(context, args)
    }, delay)
  }
}

函数防抖

函数节流是一个很好用的方法,但是在某些场景下,我并不希望每次都是要事件结束后等待delay的时间后才执行回调,但是又希望减少操作,那么我们可以按照之前的思想,开关定时器即可

//第一种 我们根据时间触发函数
function throttle(fn , duration ,delay ){
    var timer = null, 
        // 记录下开始执行函数的时间
        begin = new Date();

    return function () {
        var context = this, 
            args = arguments;
            // 记录下当前时间
            current = new Date();
        // 函数节流里的思路
        clearTimeout(timer)

        // 记录下的两个时间相减再与duration进行比较
        if (current-begin >= duration) {
             fn.apply(context , args)
             begin = current;
        } else {  
            timer = setTimeout(() => {
                fn.apply(context , args)
            }, delay)
        }
    }
}

//第二种 根据触发的次数触发函数
function throttle(fn, maxLength){
    //新建计数器,最大等待次数
    var count = 0
        maxLength = maxLength || 300;
    // 返回一个函数,实现作用域,缓存count的状态和maxLength
    return function () {
        var context = this, 
            args = arguments, 

        // 不满足条件 则不继续执行方法
        count++;
        if(count < maxLength) return '';

        // 当到达需要触发的时机以后我们触发函数,并将计数器归零
        count = 0
        fn.apply(context , args)
    }
}

你可能感兴趣的:(javascript知识)