js防抖节流 js防抖节流

防抖不希望某个事件在短时间内疯狂触发，影响性能，所以我们设置一个定时器，让这个事件在一定时间延迟后再执行，如果这个延迟中间中途这个事件又触发了，那就把上次事件绑定的定时器取消，避免了上次事件重复执行影响性能

输入完毕后过1s查询

function debounce(fn, delay) { let timer; return function() { if(timer) clearTimeout(timer); timer = setTimeout(function(){ fn.apply(this, arguments) }, delay); } }

输入完毕后立马查询，过2s后才能再次查询(立即查询)

function debounce(fn, delay) { let timer; return function() { if(timer) clearTimeout(timer); let callnow = !timer; timer = setTimeout(function(){ timer = null; }, delay); if(callnow) fn.apply(this, arguments); } }

function resize() { console.log('视窗改变时需要执行些什么...') }window.addEventListener('resize', debounce(resize, 1000))

节流 【js防抖节流】相比防抖，节流的概念更通俗，节约流量。如果一个方法在短时间内疯狂执行，我们希望它每隔一段时间执行。节约一点流量.

定时器实现

function throttle(fn, delay = 800) { var timer = null; var _delay = delay; return function(){ if(!timer) { timer = setTimeout(() => { timer = null; fn.apply(); }, _delay); } } }

时间差实现

function throttle(fn, delay = 800) { let prev = 0; //上次记录的时间 return function(){ let now = Date.now(); //当前时间 if(now - prev > delay){ fn.apply(this); prev = now; } } }