防抖动

 1假如有一个 doThings() 的方法来响应 window.onresize 事件,但这个方法执行一次需要消耗一定资源,因此不希望它频繁的执行,于是我们不直接将 doThings() 绑定到 window.onresize ,而是再定义一个 handleResize() 的方法专门处理 window.onresize,在这个方法里至少过 50ms 才调用一次 doTings(),并且每隔 200ms 必执行一次 doTings(),请实现 handleResize() 方法。
 2
 3 参考答案:
 4 function doThings() {
 5     // a lot of things
 6 }
 7 function handleResize() {
 8     var timer = null,
 9         delay = 50,
10         must_do = 200,
11         last_time;
12     return function() {
13         clearTimeout(timer);
14         var now_time = +new Date;
15         if (!last_time) {
16             last_time = now_time;
17         } else if (now_time - last_time > must_do) {
18             doThings();
19             last_time = now_time;
20         } else {
21             timer = setTimeout(function() {
22                 doThings();
23                 last_time = +new Date;
24             }, delay);
25         }
26     };
27 }
28 window.onresize = handleResize();
时间: 2024-10-07 02:18:05

防抖动的相关文章

js 函数节流 与 防抖动

函数节流:就如同成都摇号买房,前一个进去选房了,下一个就要等一段时间.这种策略就很好的解决了,一大波人进去选房,销售妹妹没发接待的尴尬局面. 应用场景:监听浏览器滚动条,然后触发函数. // 普通做法 document.getElementById("throttle").onscroll = function(){ //监听到滚动就直接触发,不停滚动就不停触发 callback(); }; // 函数节流 var canRun = true; document.getElementB

性能优化之函数防抖动

函数防抖动是一种常见的优化高频率调用函数的手段,核心是把高频率调用的函数优化为在某一时间段内只调用一次 根据具体调用的时机可以分为两种,分别是先调用防抖以及后调用防抖 先调用防抖 先调用防抖是指先调用函数,然后等待一段时间,在等待时间结束后再进行下一次调用,如果在等待时间结束前发生了多次调用,则只会响应第一次.调用时间线如下所示根据这个想法,可以大致得到如下代码 后调用防抖 后调用防抖则是先等待一段时间,在等待时间结束后调用函数,如果在等待时间结束前再次调用,则需重新计时并等待.调用时间线如下所

按键驱动的恩恩怨怨之防抖动

转载请注明出处:http://blog.csdn.net/ruoyunliufeng/article/details/24540403 一.驱动代码 #include <linux/module.h> #include <linux/kernel.h> #include <linux/fs.h> #include <linux/init.h> #include <linux/delay.h> #include <linux/irq.h>

【vue】css解决“防抖动”——防止页面加载图片抖动

overflow:hidden;height:0;padding-bottom:*; // 其中*处填 图片的高宽百分比=高/宽*100% 原文地址:https://www.cnblogs.com/smilexumu/p/9870714.html

Android IOS WebRTC 音视频开发总结(七六)-- 探讨直播低延迟低流量的粉丝连麦技术

本文主要探讨基于WebRTC的P2P直播粉丝连麦技术 (作者:郝飞,亲加云CTO,编辑:dora),最早发表在[这里] 支持原创,转载必须注明出处,欢迎关注微信公众号blacker(微信ID:blackerteam  或 webrtcorgcn) 到目前为止,直播行业继续如预期的那样如火如荼的发展着,在先后竞争完延迟,高清,美 颜,秒开等功能后,最近各大直播平台比拼的一个热点就是连麦.什么是连麦? 简单??述 就是当主播直播期间,可以与其中某一个粉丝进行互动,并且其他粉丝能够观看到这个互动 过程

高性能滚动 scroll 及页面渲染优化

本文主要想谈谈页面优化之滚动优化. 主要内容包括了为何需要优化滚动事件,滚动与页面渲染的关系,节流与防抖,pointer-events:none 优化滚动.因为本文涉及了很多很多基础,可以对照上面的知识点,选择性跳到相应地方阅读.    滚动优化的由来 滚动优化其实也不仅仅指滚动(scroll 事件),还包括了例如 resize 这类会频繁触发的事件.简单的看看: 1 2 3 4 var i = 0; window.addEventListener('scroll',function(){   

面试中注意3个javascript的问题

JavaScript 是所有现代浏览器的官方语言.因此,各种语言的开发者面试中都会遇到 JavaScript 问题. 本文不讲最新的 JavaScript 库,通用开发实践,或任何新的 ES6 函数.而是讲讲面试中经常出现的 3 个 JavaScript 问题.我问过这些问题,我的朋友说他们也问. 当然不是说你在准备 JavaScript 面试时只要学习这 3 个问题 -- 你还有很多途径去更好的准备即将到来的面试 -- 但面试官很有可能通过下面 3 个问题来判断你了解和掌握 JavaScrip

angularjs学习总结 详细教程(转载)

1 前言 前端技术的发展是如此之快,各种优秀技术.优秀框架的出现简直让人目不暇接,紧跟时代潮流,学习掌握新知识自然是不敢怠慢. AngularJS是google在维护,其在国外已经十分火热,可是国内的使用情况却有不小的差距,参考文献/网络文章也很匮乏.这里便将我学习AngularJS写成文档,一方面作为自己学习路程上的记录,另一方面也给有兴趣的同学一些参考. 首先我自己也是一名学习者,会以学习者的角度来整理我的行文思路,这里可能只是些探索,有理解或是技术上的错误还请大家指出:其次我特别喜欢编写小

PS基础

2013年7月,Adobe公司推出新版本photoshop——Photoshop CC(Creative Cloud).在Photoshop CS6功能的基础上,Photoshop CC新增相机防抖动功能.CameraRAW功能改进.图像提升采样.属性面板改进.Behance集成等功能,以及Creative Cloud,即云功能. 继2012年Adobe推出Photoshop CS6版本后,Adobe又在MAX大会上推出了最新版本的Photoshop CC (Creative Cloud).在主