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())) }