用一个变量判断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. python -pickle模块、re模块学习

    pickel模块 import pickle #pickle可以将任何数据类型序列化,json只能列表字典字符串数字等简单的数据类型,复杂的不可以 #但是pickle只能在python中使用,json ...

  2. JavaScript之原型 Prototype

    1.我们所创建的每一个函数,解析器都会向函数中添加一个属性prototype.这个属性对应着一个对象,这个对象就是我们所谓的原型对象.如果函索作为普通函数调用prototype没有任何作用. 当函数以 ...

  3. Kubernetes-Envoy(一种全新的Ingress实现方式)

    Ingress 在讲Envoy之前,先介绍一下Kubernetes中Service的表现形式为IP:Port,及工作在Ingress:TCP/IP层.而对于基于HTTP的服务来说,不同的URL地址经常 ...

  4. Java——自动生成30道四则运算---18.09.27

    package chuti;import java.io.PrintWriter;import java.util.Scanner;import java.io.FileNotFoundExcepti ...

  5. scrapy编写爬虫的时候出现缺少win32api

    环境:python3.6 工具:pycharm2017.3 scrapy fetch http://www.baidu.com ModuleNotFoundError: No module named ...

  6. 面试-MySQL总结

    三范式 三范式定义(范式和反范式) 1NF:每个数据项都是最小单元,不可分割,确定行列之后只能对应一个数据. 2NF:每一个非主属性完全依赖于候选码(属性组的值能唯一的标识一个元组,但是其子集不可以) ...

  7. Python: 列表的两种遍历方法

    方法一:以列表中元素的下标进行访问 def traverse1(list1): for i in range(len(list1)): print(list1[i], end=' ') print() ...

  8. Java之枚举笔记(Enum)

    package com.simope.ljm; public class MyEnum { public static void main(String[] args) { System.out.pr ...

  9. 「日常训练」Common Subexpression Elimination(UVa-12219)

    今天做的题目就是抱佛脚2333 懂的都懂. 这条题目干了好几天,最后还是参考别人的代码敲出来了,但是自己独立思考了两天多,还是有收获的. 思路分析 做这条题我是先按照之前的那条题目(The SetSt ...

  10. Qt 实时读串口数据,并将读到的数据从网口发送出去

    需求: 1. 要试试从串口读取数据 2. 将读到的数据从网口发送出去 3.开机启动 4. 没有界面 第一部分 配置Qt Pro文件  需要Qt += serialport network 第二部分 - ...