项目中循环计时处理某些方法的情况还是比较常见的，一般会用setInterval来处理，但是这个方法会似的页面卡顿等使用体验不好。

所以就使用浏览器提供的requestAnimationFrame方法，window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行，requestAnimationFrame的步伐跟着系统的刷新步伐走。它能保证回调函数在屏幕每一次的刷新间隔中只被执行一次，这样就不会引起丢帧现象，也不会导致动画出现卡顿的问题。

无论是用setInterval，还是requestAnimationFrame，在单页面项目中，切换页面后还是会在继续执行的所以得需要在页面切换的时候清除掉。

Vue项目中示例：

vue项目中引入循环执行setInterval或者requestAnimationFrame的用法等的更多相关文章

  1. vue项目中引入Sass

    Sass作为目前成熟,稳定,强大的css扩展语言,让越来越多的前端工程师喜欢上它.下面介绍了如何在vue项目 中引入Sass. 首先在项目文件夹执行命令 npm install vue-cli -g, ...

  2. 在vue项目中引入jquery

    在vue项目中引入jquerycnpm install jquery --save在main.js中引入,加入下面这行代码:import 'jquery'注:有些项目是按需加载的,在main.js里面 ...

  3. vue 项目中，定时器（setInterval）的写法

    vue 项目中,定时器(setInterval)的写法: fetchJobList是一个方法,里面有dispatch一个action进行请求接口的代码. data () { return { inte ...

  4. 前端学习笔记系列一：10整体移动vscode代码块、VSCode 使用 stylus，配置格式化设置、在vue项目中引入bootstrap

    1.整体移动vscode代码块 凭借操作的经验我们能够轻松地知道将代码整体往右移只需选中代码按Tab键即可.其实往左移也很简单: 选中之后按下 shift+Tab键 即可. 2.VSCode 使用 s ...

  5. 如何在Vue项目中引入jQuery?

    假设你的项目由vue-cli初始化 (e.g. vue init webpack my-project). 在你的vue项目目录下执行: npm install jquery --save-dev 打 ...

  6. 在vue项目中引入阿里图标库小记

    使用Vue技术栈开发不仅效率高,而且很友好,而且还有很多基于vue的UI框架,例如:element等,但是这类框架美中不足的是,图标太少.为了解决这个问题,不得不引入第三方字体库,今天以阿里图标库为例 ...

  7. vue-cli构建的vue项目中引入stylus文件

    在写基于vue-cli的vue项目时,如果直接引入styl文件,会报错,需要安装stylus.stylus-loader依赖以及别名配置. 1.下载安装stylus.stylus-loader,推荐使 ...

  8. 在 Vue 项目中引入 tinymce 富文本编辑器

    项目中原本使用的富文本编辑器是 wangEditor,这是一个很轻量.简洁编辑器 但是公司的业务升级,想要一个功能更全面的编辑器,我找了好久,目前常见的编辑器有这些: UEditor:百度前端的开源项 ...

  9. 详解如何在vue项目中引入饿了么elementUI组件

    在开发的过程之中,我们也经常会使用到很多组件库:vue 常用ui组件库:https://blog.csdn.net/qq_36538012/article/details/82146649 今天具体说 ...

随机推荐

  1. Linux命令-文件管理(三)

    Linux more命令 Linux more 命令类似 cat ,不过会以一页一页的形式显示,更方便使用者逐页阅读,而最基本的指令就是按空白键(space)就往下一页显示,按 b 键就会往回(bac ...

  2. Oracle用函数或PIVOT实现行转列

    原数据: 目标数据: 实现代码: SELECT YEAR AS "年", SUM (DECODE (QUATER, 1, RATE, 0)) AS "季度一", ...

  3. RabbitMq运行原理浅析

    转载:https://blog.csdn.net/Evankaka/article/details/80977027 1.RabbitMq简介     AMQP,即Advanced Message Q ...

  4. linux设置MySQL开机自动启动

    step1: 通过chkconfig --list命令查看mysqld是否在列表中: step2: 如果列表中没有mysqld这个,需要先用这个命令添加:chkconfig --add mysqld ...

  5. Java——利用反射机制将表单数据自动填充到JavaBean中

    以一个案例介绍反射机制的一种常见的使用场景,以及具体实现. 1.本文案例 在编写Java Web应用程序时,使用表单提交数据是一个必不可少的环节,后台对于前台使用表单提交的数据需要能够从请求中解析,并 ...

  6. scala Futures and Promises

    http://docs.scala-lang.org/overviews/core/futures.html  Futures and Promises   By: Philipp Haller, A ...

  7. java基本算法

    1.链表 链表用来存储数据,由一系列的结点组成.这些结点的物理地址不一定是连续的,即可能连续,也可能不连续,但链表里的结点是有序的.一个结点由数据的值和下一个数据的地址组成.一个链表内的数据类型可以是 ...

  8. 使用stringstream代替sprintf和sscanf

    C++里面的字符串格式话 之前一直是用的sprintf和sscanf 比较麻烦的是要申请一个字符数组然后在调用 用stringstream就比较完美 int main(int narg,char** ...

  9. java导入导出下载Excel,xls文件(带下拉框)

    /** * 导入excel文件 * 2014-7-23 * @return */ @RequiresPermissions("plug:product:caiwu:upload") ...

  10. Origin 2017 给曲线加标记符号

    最近在用Origin 2017画曲线图,需要给图像得曲线加上不同得标记符号用以区分,把操作步骤记录下来,免得忘了. 1.用Origin 2017打开一个曲线图,在任意一条曲线上点击右键弹出菜单,选择[ ...