防抖、节流 和 预加载、懒加载

目录

1. 防抖 节流

2. 预加载

3. 懒加载

（一）防抖 节流

1. 防抖

对于短时间内连续触发的事件（如滚动事件），防抖的含义就是让某个时间期限（如上面的1000毫秒）内，事件处理函数只执行一次。

防抖实现思路：在第一次触发事件时，不立即执行函数，而是给出一个期限值比如200ms，然后：

• 如果在200ms内没有再次触发滚动事件，那么就执行函数
• 如果在200ms内再次触发滚动事件，那么当前的计时取消，重新开始计时

效果：如果短时间内大量触发同一事件，只会执行一次函数。

实现：既然前面都提到了计时，那实现的关键就在于setTimeOut这个函数，由于还需要一个变量来保存计时，考虑维护全局纯净，可以借助闭包来实现：

/*
* fn [function] 需要防抖的函数
* delay [number] 毫秒，防抖期限值
*/
function debounce(func, wait) {
   
    var timeout;
    return function () {
   
        clearTimeout(timeout)
        timeout = setTimeout(func, wait);
    }
}

function getUserAction() {
   
    console.log(this);
    container.innerHTML = count++;
};
container.onmousemove = debounce(getUserAction, 1000);

但是如果使用上面的 debounce 函数，this 就会指向 Window 对象！所以需要将 this 指向正确的对象：绑定onmousemove的元素。且事件处理函数中要能提供事件对象 event。

//修复两个问题：1.this 指向 2.event 对象：
function debounce(func, wait) {
   
    var timeout;   
    return function () {
   
        var context = this;
        var args = arguments;
        clearTimeout(timeout)
        timeout = setTimeout(function(){
   
            func.apply(context, args)
        }, wait);
    }
}

function getUserAction(e) {
   
    console.log(e);
    console.log(this);
    container.innerHTML = count++;
};
container.onmousemove = debounce(getUserAction, 1000);

JavaScript专题之跟着underscore学防抖

2. 节流

效果：如果短时间内大量触发同一事件，那么在函数执行一次之后，该函数在指定的时间期限内不再工作，直至过了这段时间才重新生效

function throttle(func, wait) {
   
    var timeout;
    return function() {
   
        var context = this;
        var args = arguments;
        if (!timeout) {
   
            timeout = setTimeout(function(){
   
                timeout = null;
                func.apply(context, args)
            }, wait)
        }

    }
}

（二）预加载

1. 什么是预加载？

图片等静态资源在使用前提前请求，资源后续使用可以直接从缓存中加载。

2. 为什么使用预加载？

在网页全部加载之前，对一些主要内容进行加载，以提供给用户更好的体验，减少等待的时间。否则，如果一个页面的内容过于庞大，没有使用预加载技术的页面就会长时间的展现为一片空白，直到所有内容加载完毕。但预加载会增加服务器的负担。