防抖和截流都是优化高频率执行的一种手段。
区别:防抖是将多次执行后采用最后一次执行,节流是将多次执行变成每隔一段时间执行。
防抖(debounce) 高频发事件中,在足够的空闲时间内只执行一次,多次触发会把上一次延迟执行清空掉,重新开始,如果计时完毕,没有方法进来访问触发,则执行代码。
var timer=null;
function debounce(){
if(timer)clearTimeout(timer);
return function() {
timer = setTimeout(function(){console.log("防抖")}, 1000)}}
document.getElementById("sss").addEventListener("click",debounce);
节流(thorttle)高频发事件中,在一定时间内只能执行一次,稀释函数的执行频率。
var canRun=false;
function thorttle(){
if(canRun) return;
canRun=true;
setTimeout(function(){ console.log("节流"); canRun=false; }, 1000)}
document.getElementById("sss").addEventListener("click",thorttle);