什么是防抖和节流？

防抖 触发高频率事件后n秒内函数只会执行一次，如果n秒内高频事件再次触发，则重新计算时间

function debounce(fn){ let timeout = null ; return function(){ clearTimeout(timeout); timeout = setTimeout (() =>{ fn.apply(this,arguments); },500); } } function sayHi(){ console.log("防抖成功") } var inp = document.getElementById('inp'); inp.addEventListener('input',debounce(sayHi))

节流 高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率

function throttle(fn){ let canRun = true ; return function(){ if(!canRun) return; canRun = false; setTimeout(() =>{ fn.apply(this,arguments); canRun = true; },500) } } function sayHi(e){ console.log(e.target.innerWidth,e.target.innerHeight); } window.addEventListener('resize', throttle(sayHi));