用一个变量判断raf的回调是否已经执行了,已经执行了说明过了一帧,通常是16.7ms,达到了函数节流一帧的目的。

var locked = false;
window.addEventListenser('scroll',function(){
if(!locked){
locked = true;
window.requestAnimationFrame(fAnim);
}
}); function fAnim(){
locked = false;
//code
}

出处:https://juejin.im/post/5976b1ef5188250c980304c9

requestAnimationFrame实现一帧的函数节流的更多相关文章

  1. 定时器相关 setTimeout setInterval 函数节流

    这个问题也是在参加百度的前端技术学院中遇到的 任务中需要用js实现动画  导师给的评价中setInterval会导致bug 当时不理解   下面把自己学习的过程分享出来 再次理解单线程   老是说js ...

  2. requestAnimationFrame ---- 请求动画帧。

    window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画,并且要求浏览器在下次重绘之前调用指定的回调函数更新动画.该方法需要传入一个回调函数作为参数,该回调函数会 ...

  3. 关于setTimeout的妙用前端函数节流

    最近在某团队忙于一个项目,有这么一个页面,采用传统模式开发(吐槽它为什么不用React),它的DOM操作比较多,然后性能是比较差的,尤其当你缩放窗口时,可怕的事情发生了,出现了卡顿,甚至浏览器瘫痪.为 ...

  4. 结构-行为-样式-Js函数节流

    最近一个面试官问了我一个函数节流的问题,然后感觉自己工作中遇到过这个问题,但是不知道这种形式就是函数节流.下面我来说下这个Js的高级问题,思路:函数节流就是防止用户高频调用某个事件而做的Js层面的处理 ...

  5. 浅谈javascript的函数节流

    什么是函数节流? 介绍前,先说下背景.在前端开发中,有时会为页面绑定resize事件,或者为一个页面元素绑定拖拽事件(其核心就是绑定mousemove),这种事件有一个特点,就是用户不必特地捣乱,他在 ...

  6. 前端笔记之JavaScript(九)定时器&JSON&同步异步/回调函数&函数节流&call/apply

    一.快捷位置和尺寸属性 DOM已经提供给我们计算后的样式,但是还是觉得不方便,因为计算后的样式属性值都是字符串类型. 不能直接参与运算. 所以DOM又提供了一些API:得到的就是number类型的数据 ...

  7. JS的函数节流(throttle)

    什么是函数节流? 介绍前,先说下背景.在前端开发中,有时会为页面绑定resize事件,或者为一个页面元素绑定拖拽事件(其核心就是绑定mousemove),这种事件有一个特点,就是用户不必特地捣乱,他在 ...

  8. JS函数节流代码实现

    函数被频繁调用场景 Js中的函数大多数情况下都是由用户主动调用触发的,一般不会遇到性能相关的问题.但在一些少数情况下,函数的触发不是由用户直接控制.在这些场景下,函数有可能被非常频繁地调用,而造成大的 ...

  9. 谈谈JS中的函数节流

    好吧,一直在秋招中,都没怎么写博客了...今天赶紧来补一补才行...我发现,在面试中,讲到函数节流好像可以加分,尽管这并不是特别高深的技术,下面就聊聊吧! ^_^ 备注:以下内容部分来自<Jav ...

随机推荐

  1. linux文件IO操作篇 (二) 缓冲文件

    2. 缓冲文件操作 //规模较大 实时性低的文件 //当数据长度快要超过缓冲区的范围时,或者时间周期达到时,数据才被送往指定位置 //需要使用FILE * 作为文件标识符 //stdin 标准输入 / ...

  2. 前端面试题目汇总摘录(HTML 和 CSS篇)

    温故而知新,保持空杯心态 HTML 和 CSS 你做的页面在哪些浏览器测试过?这些浏览器的内核分别是什么 浏览器名称 内核 IE trident Firefox(火狐) gecko Safari we ...

  3. python第一个程序-->hello world

    最近在网上看到一个小笑话,一个程序员的自我嘲讽:“我精通所以计算机语言的hello world!” 好了,废话不多说了,开始撸代码: 我本人用的是python3.6版本,各位可以通过官网下载自己喜欢的 ...

  4. “Code First Migrations ”工具【转】

    在本篇文章中,我们学习如何使用实体框架的“Code First Migrations ”(也称为代码先行功能)工具,使用其中的“迁移”功能对模型类进行一些修改,同时同步更新对应数据库的表结构. 默认情 ...

  5. ubuntu设置ssh登陆

    转: 默认请况下,ubuntu是不允许远程登陆的.(因为服务没有开,可以这么理解.) 想要用ssh登陆的话,要在需要登陆的系统上启动服务.即,安装ssh的服务器端 $ sudo apt-get ins ...

  6. HTML 特效标签

    HTMl 文字移动<MARQUEE scrollAmount=2 scrollDelay=150 direction=up height=120> 内容 </marquee>s ...

  7. 我所认识的XPath

    实例demo 测试demo所需要xml测试数据 <?xml version="1.0" encoding="iso-8859-1"?> <bo ...

  8. jsp 中获取自定义变量

    首先确定El表达式的查找范围: 依次从Page.Request.Session.Application 中的 attribute属性中查找. <% String basePath = reque ...

  9. join ,left join ,right join有什么区别

    join等价于inner join内连接,是返回两个表中都有的符合条件的行. left join左连接,是返回左表中所有的行及右表中符合条件的行.(左表为主表) right join右连接,是返回右表 ...

  10. Sumsets 递推

    Sumsets Time Limit : 6000/2000ms (Java/Other)   Memory Limit : 32768/32768K (Java/Other) Total Submi ...