web性能优化 - 防抖与节流

防抖

最终效果：在规定时间内，不管触发多少次，在频繁触发结束后，只执行一次

使用场景：
滑动滚轮对页面中图片进行懒加载
目标：
降低对DOM的操作，提升浏览器性能

//函数防抖
function debounce(fn,shakeTime){
    clearTimeout(fn.iTimer);
    fn.iTimer = setTimeout(function(){
        fn && fn();
    },shakeTime)
}

$(window).on('resize',function(){
    debounce(laziLoadFn,300);
});
$(window).on('scroll',function(){
    debounce(laziLoadFn,300);
});
laziLoadFn();

节流

最终效果：只要触发了一次，在本次处理未完成前，不再接受触发；除非本次处理完毕了

使用场景:
表单提交时候，不小心双击了提交按钮.
目标：
防止一个时间段内，多次触发

var oSubBtn = $('#subBtn ');
var canClick = true;

oSubBtn.on('click',function(){
  if(canClick){
    canClick = false;
    $.ajax({
        type: "GET",
        url: "xxx",
        data: {username:$("#username").val(), content:$("#content").val()},
        dataType: "json",
        success: function(data){
           //操作......
           canClick = true;     
        },
        error: function(data){
           //操作......
           canClick = true;     
        },
    });
  } 
});