关于js函数节流和去抖动

实际上啊,今天早上本来想干点别的,但是在吃早餐的时候浏览了下掘金,然后看到了这篇博文<a href="https://gold.xitu.io/post/583b10640ce463006ba2a71a">Jake的关于图片懒加载</a> 就顺带研究了一波函数节流和去抖动问题。

为什么要函数节流

以下场景往往由于事件频繁被触发,因而频繁执行DOM操作、资源加载等重行为,导致UI停顿甚至浏览器崩溃。

  1. window对象的resize、scroll事件
  2. 拖拽时的mousemove事件
  3. 射击游戏中的mousedown、keydown事件
  4. 文字输入、自动完成的keyup事件
    例子以scroll事件进行解析
    <code>
    window.onscroll = function(){
    lazyload();
    //throttle(lazyload,window);
    };
    function lazyload(){
    console.log("scroll执行了"+scrollnum);
    }
    </code>


    滚动一次

    我们的本意只是让鼠标滚动一次执行一次滚动函数,但是window的onscroll函数并不是等scroll结束之后才会调用,鼠标滚动或拖动滚动条,就会不停的触发scroll事件,如果处理的东西多,低版本的IE也会陷入假死状态。


解决办法

debounce

抖动:如果用手指一直按住一个弹簧,它将不会弹起直到你松手为止。 也就是说当调用动作n毫秒后,才会执行该动作,若在这n毫秒内又调用此动作则将重新计算执行时间。这种比较适合window的resize事件,实际需求大多为停止改变大小n毫秒后执行后续处理;而其他事件大多的需求是以一定的频率执行后续处理。针对这两种需求就出现了和throttle两种解决办法。

  1. 去抖1
    <code>
    window.onscroll = function(){
    //lazyload();
    debounce(lazyload,window);
    };
    function debounce(method,context){
    clearTimeout(method.timeout);
    method.timeout = setTimeout(function(){
    method.call(context);
    },500);
    }
    function lazyload(){
    console.log("scroll执行了"+scrollnum);
    }
    </code>
    效果如下,可以看出只执行了一次lazyload函数:


    节流之后的滚动一次的执行效果

    利用定时器,让函数执行延迟500毫秒,在500毫秒内如果有函数又被调用则删除上一次调用,这次调用500毫秒后执行,如此往复
    2.去抖2.
    还有一种节流方式,是通过返回闭包的形式,可以设置延迟时间,两者运行的结果是一样,但是我在实际操作的时候设置延迟500时,滚动过了一会才执行了,设置为delay为100的时候在视觉上就没有感觉延迟。而且函数也只滚动了一次。
    <code>
    function debounce1(method,delay){
    var timer = null;
    return function(){
    var context = this,args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function(){
    method.apply(context,args);
    },delay);
    }
    }
    </code>

throttle

当我一直滚动鼠标的时候,lazyload函数就会不断被延迟,这样只有停下来的时候才会执行,那么再有些需要及时显示的情况下,就显得不那么友好了(对于实现keyup事件的提示也没有意义了),所以可以为函数添加一个参数作为到固定间隔必须执行,到了这个时间间隔就必须执行,这个时候就引入了节流:
节流:如果将水龙头拧紧直到水是以水滴的形式流出,那你会发现每隔一段时间,就会有一滴水流出。也就是会说预先设定一个执行周期,当调用动作的时刻大于等于执行周期则执行该动作,然后进入下一个新周期
代码如下:
<code>
function throttle2(method, delay, time) {
var timeout,startTime = new Date();
return function() {
var context = this,
args = arguments,
curTime = new Date();
clearTimeout(timeout);
// 如果达到了规定的触发时间间隔,触发 handler
if (curTime - startTime >= time) {
method.apply(context, args);
startTime = curTime;
// 没达到触发间隔,重新设定定时器
} else {
timeout = setTimeout(method, delay);
}
};
</code>



在这个函数中,当一次时间较长的时候还是会执行两次,而不是等滚动停止之后再执行。达到了想要的效果,既没有频繁的执行也没有最后执行

引一波图片懒加载。

页面加载速度影响最大的就是图片,一张普通的图片可以达到几M的大小,而代码也许就只有几十KB。当页面图片很多时,页面的加载速度缓慢,几S钟内页面没有加载完成,也许会失去很多的用户。
所以,对于图片过多的页面,为了加速页面加载速度,所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载, 等到滚动到可视区域后再去加载。这样子对于页面加载性能上会有很大的提升,也提高了用户体验。

将页面中的img标签src指向一张小图片或者src为空,然后定义data-src(这个属性可以自定义命名,我才用data-src)属性指向真实的图片。src指向一张默认的图片,否则当src为空时也会向服务器发送一次请求。可以指向loading的地址

只有当滚动到该图片的时候才将该图片的src换为data-src。这样就能加速加载速度。


这样一开始页面只需要加载一张图片
滚动两次之后

参考网址:https://gold.xitu.io/post/583b10640ce463006ba2a71a
http://www.cnblogs.com/dolphinX/p/3403821.html
http://blog.csdn.net/fengyinchao/article/details/50749317
https://segmentfault.com/a/1190000002764479
http://www.jb51.net/article/49502.htm
http://www.cnblogs.com/fsjohnhuang/p/4147810.html

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,688评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,559评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,749评论 0 226
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,581评论 0 191
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,741评论 3 271
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,684评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,122评论 2 292
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,847评论 0 182
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,441评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,939评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,333评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,783评论 2 236
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,275评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,830评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,444评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,553评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,618评论 2 249

推荐阅读更多精彩内容

  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 7,615评论 2 17
  • ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程,因...
    小菜c阅读 6,158评论 0 17
  • HTML5面试题总结1.基础问题 = 和 == 和 === 的区别?= : 用于赋值 == : 用于判断 === ...
    LorenaLu阅读 1,103评论 0 4
  • 人生就像是烟花,变化莫测,你永远猜不准,下一刻会是什么颜色,什么形状,会发生什么,你只知道,你的人生并不像烟...
    小名博涵阅读 227评论 0 0
  • 最近真是怠惰的季节,书也不想看,电视剧也不想看(虽然还是看了不少),课题也没能理想(虽然没日没夜仿真)。 看这本书...
    Tunatime阅读 175评论 0 0