用一个变量判断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. 继上一篇bootstrap框架(首页)弄的资讯页面

    还是和上一篇首页一样给出每一步的注解: 做的有点简单,但是,以后还是会加深的.毕竟是初学者嘛! <html lang="zh-cn">   <head>   ...

  2. 21.1 XMLHttpRequest 对象【JavaScript高级程序设计第三版】

    IE5 是第一款引入XHR 对象的浏览器.在IE5 中,XHR 对象是通过MSXML 库中的一个ActiveX对象实现的.因此,在IE 中可能会遇到三种不同版本的XHR 对象,即MSXML2.XMLH ...

  3. labview初始学习过程中遇到串口读取框红蓝色交替闪烁的处理

           labview工程的程序框图VISA串口读取框红蓝交替闪烁,前面板接收数据错乱,或者是接受不了,这是你不小心设置了断点.

  4. 按升序打印X,Y,Z的整数值

    #include <stdio.h> #define TRUE 1 #define FALSE 0 int main() { int x,y,z; printf("x: &quo ...

  5. Shoot the Bullet(ZOJ3229)(有源汇上下界最大流)

    描述 ensokyo is a world which exists quietly beside ours, separated by a mystical border. It is a utop ...

  6. JS 实现随机验证码功能

    1.验证码 验证是网页常出现的一个验证点,所谓验证码类型有很多,下面代码只是实现一个简单的验证功能. <div> <input type = "text" id ...

  7. xss挑战赛小记 0x01(xsstest)

    0x00 今天在先知社区看到了一个xss挑战赛 结果发现比赛已经结束 服务器也关了 百度找了个xss挑战赛来玩一下 正好印证下xss的学习--- 地址     http://test.xss.tv/ ...

  8. LeetCode:26. Remove Duplicates from Sorted Array(Easy)

    1. 原题链接 https://leetcode.com/problems/remove-duplicates-from-sorted-array/description/ 2. 题目要求 给定一个已 ...

  9. centos7用yum搭建LAMP环境

    用yum快速搭建LAMP平台 实验环境: [root@nmserver- html]# cat /etc/redhat-release CentOS release (AltArch) [root@n ...

  10. 时间动态协同过滤(TimeSVD++)

    原作者 原论文地址 http://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.379.1951&rep=rep1&type=pd ...