【大白话】说JS的实际应用之防抖节流和图片懒加载

前言

大白话说JS内容包括：DOM的一些操作，Promise相关， 微任务宏任务，作用域，变量提升，闭包，变量类型，深浅拷贝，原型和作用域链，后续争取把js重点都记录上，深入浅出。

图片懒加载和预加载

预加载：一下子把页面中的图片缓存到本地，加载时从本地读取，不用等，优化了用户体验，如果网页图片过多会造成加载区域空白的情况。（拿时间换体验）

懒加载：先加载可视区域的图片，在将剩下的img标签中的src链接设为同一张图片, 真正的地址存储在img标签的自定义属性中(比如data-src); 当js监听到该图片元素进入可视窗口（scrollTop方法）时,即将自定义属性中的地址存储到src属性中,达到懒加载的效果。

节流和防抖

防抖：在事件被触发n秒后再执行事件回调，如果在这n秒内又被触发，则重置定时器。

节流：在一个单位时间内，不管怎样都只能触发一次函数

// 简单的防抖动函数
function debounce(func, wait, immediate) {
    // 定时器变量
    var timeout;
    return function() {
        // 每次触发 scroll handler 时先清除定时器
        clearTimeout(timeout);
        // 指定 xx ms 后触发真正想进行的操作 handler
        timeout = setTimeout(func, wait);
    };
};
 
// 实际想绑定在 scroll 事件上的 handler
function realFunc(){
    console.log("Success");
}
 
// 采用了防抖动
window.addEventListener('scroll',debounce(realFunc,500));
// 没采用防抖动
window.addEventListener('scroll',realFunc);

上面例子的大概功能就是如果 500ms 内没有连续触发两次 scroll 事件，那么才会触发我们真正想在 scroll 事件中触发的函数（停止滑动才触发）。实际过程中，我们更希望边滑动边加载图片。

与防抖相比，节流函数多了一个 mustRun 属性，代表在 X 毫秒内至少执行一次我们希望触发的事件 handler。而不会像防抖那样，需要达到条件才会触发。

// 简单的节流函数
function throttle(func, wait, mustRun) {
    var timeout,
        startTime = new Date();
 
    return function() {
        var context = this,
            args = arguments,
            curTime = new Date();
 
        clearTimeout(timeout);
        // 如果达到了规定的触发时间间隔，触发 handler
        if(curTime - startTime >= mustRun){
            func.apply(context,args);
            startTime = curTime;
        // 没达到触发间隔，重新设定定时器
        }else{
            timeout = setTimeout(func, wait);
        }
    };
};
// 实际想绑定在 scroll 事件上的 handler
function realFunc(){
    console.log("Success");
}
// 采用了节流函数
window.addEventListener('scroll',throttle(realFunc,500,1000));

大概功能就是如果在一段时间内 scroll 触发的间隔一直短于 500ms ，那么能保证事件我们希望调用的 handler 至少在 1000ms 内会触发一次。

持续更新中...