前端性能优化之---防抖和节流

防抖:为了防止用户频繁发出请求或者频繁触发某个时间函数,造成页面卡顿影响体验。防抖就是把用户频繁触发的多次事件做成一次触发。
代码逻辑:
下面展示一些 内联代码片

	let time = null;
    function debounce(){
        if(time){
            clearTimeout(time);   //设定时间内的下一次事件触发时清空定时器
        }

        time = setTimeout(function (){
            console.log(123);
            time = null;   //执行完清空定时器
        },1500)   //1500为设定事件触发后1.5秒内没有下一次的事件触发执行一次
    }

节流:也是为了防止用户频繁发出请求或者频繁触发某个时间函数,造成页面卡顿影响体验。节流就是把用户频繁触发的事件按一定的频率来触发。
代码逻辑:
下面展示一些 内联代码片

    let timeThrotle = null;
   function throttle(){
       if(timeThrotle){
        return ;    //设定时间内的下一次事件触发时返回
       }

       timeThrotle = setTimeout(() => {
        console.log(111);
        timeThrotle = null;   //执行完清空定时器
       },1000);   //1000为设定每1秒执行一次

   }

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