这个优化方案是参照

在这里简单的把两个方式写出来，以便快速了解。。

第一种：防抖（也就是滚动结束才执行）

演示：

闭包：

/*    延时执行    @param fn function    @param wait number    @return function*/function debounce(fn, wait) {    var timeout = null;    return function() {        if(timeout !== null) clearTimeout(timeout);        timeout = setTimeout(fn, wait);    }}// 处理函数function handle() {    console.log(Math.random()); }// 滚动事件window.addEventListener('scroll', debounce(handle, 500));

直接写：

var timeout = null;window.addEventListener('scroll', function() {    if(timeout !== null) clearTimeout(timeout);    timeout = setTimeout(function() {        var scrollTop = this.scrollY;        console.log(scrollTop);    }.bind(this), 500);});

第二个是节流（Throttling）滚动的过程中间隔执行，例如滚动加载图片效果，不可能等到滚动结束才执行加载函数数吧，所以这里可以做一个间隔执行。。

演示：

闭包：

/*    节流函数    @param fn function    @param wait number    @param maxTimeLong number    @return function*/function throttling(fn, wait, maxTimelong) {    var timeout = null,        startTime = Date.parse(new Date);    return function() {        if(timeout !== null) clearTimeout(timeout);        var curTime = Date.parse(new Date);        if(curTime-startTime>=maxTimelong) {            fn();            startTime = curTime;        } else {            timeout = setTimeout(fn, wait);        }    }}function handle() {    console.log(Math.random()); }window.addEventListener('scroll', throttling(handle, 300, 1000));

直接写：

var timeout = null,    startTime = Date.parse(new Date); // 开始时间function handle() {    console.log(Math.random()); }window.addEventListener('scroll', function() {    if(timeout !== null) clearTimeout(timeout);    var curTime = Date.parse(new Date); // 当前时间    if(curTime-startTime>=1000) { // 时间差>=1秒直接执行        handle();        startTime = curTime;    } else { // 否则延时执行，像滚动了一下，差值<1秒的那种也要执行        timeout = setTimeout(handle, 300);    }});

诸如此类事件的还有resize事件都可以使用这两种方式,当然使用哪一种，还要看项目需求了。。谢谢关注~