JS防抖节流

1.防抖:持续触发事件时,在设定时间段内没有触发,才会去调用这个事件处理函数,在设定的时间段内如果事件又被触发,则不调用事件处理函数,并从触发事件重新开始延时。

        function debounce(fn, timeout){

                   timeout = timeout || 1000;

                   let timer;

                   return () => {

                     if(timer){ clearTimeout(timer)}

                             timer = setTimeout(() => {

                                       n()

                             },timeout)

                           }

                }

        function printEvent(){

           console.log('1121212')

        }

  window.addEventListener('scroll',debounce(printEvent,1000),false)

2.节流:当事件被持续触发时,在设定事件内只让事件处理函数触发一次。

//节流函数

function throttle(fn, range){

   range = range || 1000;

   let timer;

   return () => {

     //console.log(111,typeof timer)

     if(!timer){

       timer = setTimeout( () => {

          fn()

         timer = null

       },range)

     }

   }

}

  window.addEventListener('mousemove',throttle(printEvent,1000),false)

//节流函数 时间戳模式

var throttle2 = function(func, delay) {

var prev = Date.now();

return function() {

var context = this;

var args = arguments;

var now = Date.now();

if (now - prev >= delay) {

func.apply(context, args);

prev = Date.now();

}

}

}


版权声明:本文为fay_ren原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。