用一个变量判断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. Discuz论坛搜索下拉框插件openSug

    Discuz!只需安装openSug插件即可获得带有“搜索框提示”功能的搜索框,让您的Discuz搜索更便捷! 下载:https://www.opensug.org/faq/.../opensug.d ...

  2. Delphi方法

    unit Unit1; interface uses   Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, For ...

  3. Elasticsearch 常用API

    1.   Elasticsearch 常用API 1.1.数据输入与输出 1.1.1.Elasticsearch 文档   #在 Elasticsearch 中,术语 文档 有着特定的含义.它是指最顶 ...

  4. hive 学习系列之七 hive 常用数据清洗函数

    1,case when 的利用,清洗诸如评分等的内容,用例如下. case when new.comment_grade = '五星商户' then 50 when new.comment_grade ...

  5. 【Hive二】 Hive基本使用

    Hive基本使用 创建数据库 创建一个数据库,数据库在HDFS上的默认存储路径是/user/hive/warehouse/*.db create database 库名; 避免要创建的数据库已经存在错 ...

  6. JavaScript之DOM查询

    DOM查询 - 通过具体的元素节点来查询 - 元素.getElementsByTagName() - 通过标签名查询当前元素的指定后代元素,返回数组 - 元素.childNodes - 获取当前元素的 ...

  7. 003---设计首页index页面

    在项目的urls.py文件添加一条url from django.contrib import admin from django.urls import path, re_path from app ...

  8. 三种urllib实现网页下载,含cookie模拟登陆

    coding=UTF-8 import re import urllib.request, http.cookiejar, urllib.parse # # print('-------------- ...

  9. 【转】使用git提交项目到码云

    一.git安装 1.首先在官方网站下载git工具,或者根据以下链接进行下载:http://download.csdn.net/detail/qq_27501889/9788879(此链接版本为git- ...

  10. Java并发(多线程)

    一.多线程的基本概念 1.什么是进程.多进程有什么作用? 大家都使用计算机,当我们打开某一个软件的时候,其实就是启动了一个进程,可以打开任务管理器看看,我们打开的每一个软件,都是一个进程,在同一个操作 ...