防抖和节流

1.什么是函数节流?

函数节流,一个函数执行一次后,只有大于设定的执行周期后才会执行第2次。

-换句话说:有个需要频繁触发函数,出于性能优化角度,在规定时间内,只让函数触发的第一次生效,后面不生效。

function throttle(fn,delay){

// 记录上一次函数触发时间

var lastTime = 0;

return function (){

  // 记录当前函数触发的时间

var nowTime = Date.now();

if(nowTime - lastTime > delay){

fn();

//同步时间

lastTime = nowTime;

}

}

}

document.onscroll = throttle(function(){ console.log('scroll事件被触发了‘+Date.now());},200)

2.什么是函数防抖?

一个需要频繁触发的函数,在规定时间内,只让最后一次生效,前面的不生效

function debounce(fn,delay){

// 记录上一次的延时器

var timer = null;

return function(){

// 清除上一次的延时器

timer= setTimeout(function(){ fn.apply(this);},delay);

}

}

document.getElementById('btn').onclick = debounce (function(){console.log('点击事件触发’+Date.now();)},1000);

原文地址:https://www.cnblogs.com/web-zxq/p/12826923.html