前端防抖节流

防抖和节流是前端最基本的性能优化,在绑定监听事件onmousemove,onmousewheel时,如果触发过于频繁,在一次触发尚未执行完时又再次触发,就会造成浏览器丢帧,进而影响用户体验,防抖和节流就是为了解决这个问题。

防抖:在事件触发n秒后再执行这个函数,如果在n秒内又触发则重新计时

function antishake(fn,time=300){
    let timeout=null;
    return function(){
        clearTimeout(timeout);
        timeout=setTimeout(()=>{
            fn.apply(this,arguments)},time)}}

节流:在单位时间内如果多次触发则只执行一次

function throttle(fn,timeout=300){
    let run=true;
    return function(){
        if(!run)return;
        run=false;
        setTimeout(()=>{fn.apply(this,arguments);run=true},timeout)}}

 

你可能感兴趣的:(前端)