JavaScript中的节流与防抖函数

function debounce(fn, delay) {
  var timer = null;
  return function() {
     // 清除已存在的定时器
     timer && clearTimeout(timer)
     timer = setTimeout(function() {
        fn.apply(this)
     }, delay)
  }
}
let $btn = document.getElementById('btn');
var fn = function() {
  console.log ('防抖旨在时间段内只触发最后一次执行' + new Date(Date.now()));
}
$btn.onclick = debounce(fn, 1000);
function throttle(fn, delay) {
  // 记录上次触发的时间戳
  var lastTime = 0;
  return function() {
     // 记录当前触发的时间戳
     var nowTime = Date.now();
     // 如果当前触发与上次触发的时间差值 大于 设置的周期则允许执行
     if (nowTime - lastTime > delay) {
        fn.call(this);
        // 更新时间戳
        lastTime = nowTime;
     }
  }
}
document.onscroll = function () {
  console.log ('节流旨在时间段内控制触发的频率'+new Date(Date.now()))
}

 

posted @ 2021-07-08 10:37  MrSlow  阅读(35)  评论(0)    收藏  举报