项目中循环计时处理某些方法的情况还是比较常见的,一般会用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. Express + Mongoose 极简入门

    今天尝试使用express + mongoose,构建了一个简单的Hello world,实现以下功能: 定义mongodb使用的Schema,一个User 访问/输出Hello world 访问/i ...

  2. 解决idea无法显示中文候选框问题

    第一:先找到idea安装目录,找到文件jre64,把它命名为“jre642”,也可以随意命名 第二步:找到Javaan安装目录下的jre  ,把它复制到idea安装目录下,命名为“jre64”. 第三 ...

  3. 关于Spring3与Jdk8 遇到的问题ArrayIndexOutOfBoundsException:xxxxxx

    Spring 3不完全兼容JDK8. 需要升级到Spring 4才能使用Java 8 lambda表达式.

  4. C++入门经典-例5.9-使用空类型指针执行函数

    1:运行代码: // 5.9.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <iostream> using ...

  5. @RequestMapping注解学习

    1.@RequestMapping注释用于映射url到控制器类或一个特定的处理程序方法.可用于类或方法上.用于类上,表示类中的所有响应请求的方法都是以该地址作为父路径. 参考地址:https://ww ...

  6. PHP CI 框架简单使用(二)

    我们简单认识一下CI框架的MVC.示例代码如下 //CI控制器文件Home.php <?php defined('BASEPATH') OR exit('No direct script acc ...

  7. visual studio运行时库MT、MTd、MD、MDd

    在开发window程序是经常会遇到编译好好的程序拿到另一台机器上面无法运行的情况,这一般是由于另一台机器上面没有安装响应的运行时库导致的,那么这个与编译选项MT.MTd.MD.MDd有什么关系呢?这是 ...

  8. kotlin之字符串模板

    所谓字符串模板就是在字符串中添加若干个占位符,内容会在后期指定,也就是说,用模板可以设置字符串动态的部分,模板使用美元符号$设置如i=$i 中 的$i就是一个占位符,其中4后面的i是变量,随着i的变化 ...

  9. OpenStack 启动虚拟机 Booting from Hard Disk

    问题 OpenStack 启动虚拟机 Booting from Hard Disk-GRUB 环境 OpenStack RUNNING IN vSphere 6.0.0 VM 开启了 CPU 虚拟化支 ...

  10. CentOS 7.x关闭/开启防火墙出现Unit iptables.service failed to load: No such file or directory问题解决

    一直用CentOS 6.x,今天用CentOS7.3版本时,防火墙配置后执行service iptables start出现”Failed to restart iptables.service: U ...