js防抖和限流

js防抖和限流

2019-04-08 10:54:56 微信号 xiexiezhizhi 阅读数 533  收藏 更多

分类专栏： js

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/a_passing_traveller/article/details/89083676

防抖

函数在300毫秒内触发就停掉定时器，只有在300毫秒后触发才会执行回调。

function debounce(callback,delay=300){
    var t = null
    return function(){
      clearTimeout(t)
      t = setTimeout(callback,delay)
    }
  }
  window.onscroll = debounce(function(){
    console.log('调用了一次');
  })

限流

函数只有在前后两次的时间大于500毫秒触发才会执行回调。

function throttle(callback,duration){
    var lastTime = new Date().getTime()
    return function(){
      var now = new Date().getTime()
      if(now - lastTime > 500) {
        callback();
        lastTime = now;
      }
    }
  }
  window.onscroll = throttle(function(){
    console.log('调用了一次');
  })