项目中循环计时处理某些方法的情况还是比较常见的，一般会用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. html密码框value为空,但是总有默认密码(原)

    input输入框加属性:autocomplete="new-password" ,浏览器就不会给他填充默认密码. <input class="form-contro ...

  2. [CSP-S模拟测试]:多维网格（组合数学+容斥）

    题目传送门(内部题138) 输入格式 输入数据第一行为两个整数$d,n$. 第二行$d$个非负整数$a_1,a_2,...,a_d$.     接下来$n$行,每行$d$个整数,表示一个坏点的坐标.数 ...

  3. 关于虚拟机中Linux系统无法上网之后的解决方案

    我刚刚安装好虚拟机上的Linux的时候,宿主机网络正常,但虚拟机中虽然显示网络连接正常,但无法上网,因此我打开了网络设置 这是默认设置,但上不了网,而按照网上的查找结果,选择NAT是没错的,但仅限于w ...

  4. xshell上windows和linux互传文件命令

    1.安装lrzsz包: yum install -y lrzsz 2.从windows上传文件到linux服务器: rz 会弹出选择文件窗口,按照提示做就行3.从linux服务器下载文件到本地的win ...

  5. javaInt占几个字节

    javaInt占几个字节 一个字节等于8位:1 byte = 8 bit. 在java中的中文和英文字母都是采用Unicode编码来表示的,一个Unicode编码为16位,1个字节是8位,所以1个Un ...

  6. Java反序列化与远程代码执行

    https://mp.weixin.qq.com/s/asQIIF8NI_wvur0U0jNvGw 原创: feng 唯品会安全应急响应中心 2017-09-19 https://mp.weixin. ...

  7. vue问题三：element ui的upload组件上传图片成功和移除事件

    element ui的upload组件上传图片成功和移除事件: 登录后获取到后台传的token存到中: sessionStorage.setItem("token",data.ob ...

  8. 权重随机算法Java实现

    权重随机算法在抽奖,资源调度等系统中应用还是比较广泛的,一个简单的按照权重来随机的实现,权重为几个随机对象(分类)的命中的比例,权重设置越高命中越容易,之和可以不等于100: 简单实现代码如下: ? ...

  9. Radio 单选框

    Radio 单选框 在一组备选项中进行单选 ¶基础用法 由于选项默认可见,不宜过多,若选项过多,建议使用 Select 选择器. 要使用 Radio 组件,只需要设置v-model绑定变量,选中意味着 ...

  10. 使用conda安装命令时一直出现问题，因为从2019年4月添加的国内镜像都不能用了

    安装过程中出现以下问题:(历尽千辛万苦,终于才查到原来是清华源,腾讯源都不能用了)The remote server could not find the noarch directory for t ...