vue使用setInterval做loading加载延时并及时清除计时

最新推荐文章于 2024-05-29 19:15:59 发布
最新推荐文章于 2024-05-29 19:15:59 发布
阅读量1.6k 收藏 3
点赞数 2
分类专栏： vue前端小问题 文章标签： vue vue.js javascript 1024程序员节
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lee_amazing/article/details/109197931
版权

延迟5s加载并及时清除计时，只需要吧clearInterval内嵌在setInterval中即可。

var loadingTime = setInterval(() => {
        this.loading = false
        clearInterval(loadingTime)
      }, 5000)
lee_amazing
关注
专栏目录
VUE——axios的interceptor拦截器实现加载数据前显示几秒loading页面后消失（图文详情）
Poppy_LYT的博客
08-02 2497
VUE——interceptor拦截器 demo示例：在请求成功之前拦截，显示loading蒙层，在请求成功之后loading蒙层消失，并console.log出请求的内容 需要用到 1、 // 添加请求拦截器 axios.interceptors.request.use 2、// 添加响应拦截器 axios.interceptors.response.use 第一步：创建一个loading.vu...
web前端不用怕，外卖平台的项目开发流程，大全！！
weixin_53000915的博客
03-06 3147
项目开发流程 1. 创建客户端项目 1.1 使用 vue-cli(脚手架)搭建项目 #在Github新建Vue-MintShop项目,然后clone到本地 git clone git@github.com:W-Qing/Vue-MintShop.git cd Vue-MintShop #创建客户端项目 vue init webpack mintshop-client cd mintshop-client npm install npm run dev 访问: localhost:8080 1.2 项目结构
Debug-013-el-loading中显示倒计时时间
最新发布
LM0916的博客
05-29 800
优化：前端除了根据后端返回的ending字段判断停止调用查询接口以外，还会给出一个30秒的兜底时间，也就是说30秒之后如果ending字段依旧是false，前端就认为查询超时，停止loading和调用接口，而且想把这个30秒的时间放在loading上，可以更好的告诉用户需要等待最长大概30秒左右。今天实现一个小小的优化，业务上是后端需要从设备上拿数据，所以前端需要不断调用一个查询接口，直到后端数据获取完毕，前后端根据一个ending字段为true判断停止调用查询接口。对，大概是这么个思路。
vue获取页面数据结束前添加loading，结束后再显示页面
curlyhairfeifei的博客
04-13 3782
vue获取页面数据结束前添加loading，结束后再显示页面 今天做项目的时候，后端提供了一个接口返回的数据量很大，获取完整的数据需要一定的时间，而没有完整的数据是没有办法显示正常的界面的，所以就需要添加一个loading的效果。 我直接是选择使用element-ui提供的loading组件来实现，实现过程如下（较为简单，只是记录一下，方便以后使用）： 首先，vue创建页面的函数为created()方法，这个方法内部调用我们需要的数据的接口。 我需要实现的效果就是这个接口获取好数据之前要有个loading
使用 loading 属性延迟加载图片
lio-zero 的博客
11-16 612
我们经常需要对网站中的图像进行优化，其中一项技术便是懒加载，通常是延迟加载初始视口外的图像，直到我们滚动页面，达到图像与底部视口的交汇处才开始加载图像。 通常情况下，我们都是使用 JS 编写方法(例如 Intersection Observer API )或外部库延迟加载图像。而 HTML 标准中已经存在 loading 属性，可以精确的感知这种行为。 以下是 Can I Use 给出其的兼容情况...
vue3+ts 封装防抖函数加上加载动画超时关闭动画
qq_59517460的博客
01-19 711
为了防止按钮连续点击造成不必要的多次触发,给按钮触发加上防抖还是很有必要的。使用: 给按钮绑定debounceEvent。
v-loading 保存提交时等待
KaNoha33的博客
05-30 180
【代码】v-loading 保存提交时等待。
发现问题：edge浏览器的效率模式会导致setTimeout/setInterval变慢
Jay的博客
07-29 682
当edge浏览器启用效率模式后，setTimeout/setInterval运行一段时间后，执行间隔会变慢。
前端面试题知识点总结（仅供参考）
jiang16608544720的博客
03-14 1804
以下是本人面试后总结出来的面试知识点： 1.1. 模块化 \1. ES6 \2. Commonjs 1.2. 构建工具 \1. Webpack核心思想：模块化打包 \2. Webpack基本配置: entry, output, module&rules, plugins, devServer, devtool, resolve \3. 打包各种资源: JS / CSS/img/html/… \4. 加分项: 自定义webpack打包环境, Webpa
2022前端笔记
马航机长的博客
06-24 2209
tip：只记录本人记得不牢固的，或者有启发的点，新手建议多看书 1、原型链 实例对象的constructor也会指向构造函数 因为没有constructor属性会通过原型链找（容易忽略，是个小陷阱） function Person() {} var person = new Person(); console.log(person.constructor === Person); // true __proto__ 来自于 Object.prototype,更像是一个 getter/setter，使用 o
前端面试题总结(PS:尊重劳动成果拿或者要原笔记记得滴滴)
weixin_46917587的博客
05-30 480
前端优化性能的方法 压缩字体文件 使用 fontmin-webpack 插件对字体文件进行压缩 减少 HTTP 请求 使用字体图标 iconfont 代替图片图标 使用 webp 格式的图片 减少重绘重排 使用事件委托 使用 Web Workers html + css 1. HTML和CCS3新增那些内容？ 广义上的html5指的是最新一代前端开发技术的总称，包括html5，CSS3，新增的webAPI。 Html中新
web面试必知宝典
lxn_zyl的博客
04-29 1104
一、个人简历模版 https://a.lmongo.com/offer/resume.html 二、自我介绍话术 您好，我叫xxx，今年xxx岁，老家xxx。做前端开发已经xxx年了，期间换过xxx家公司，第一家是一个 xxxx类型公司，叫xxxxx；上一家家叫xxxx，上一家公司是自己公司或外包公司，做自己的产品或者做 别人的产品，在上一家公司呆了xxx(多长时间)，上一家公司一共xxx人，开发团队xxx人，一共xxx个小 组，我们小组xxx人，前端xxx人，后端xxx人，.
vue下，setInterval会影响swiper
Vintage
12-18 973
在做项目中，由于使用了setInterval 函数来进行倒计时，导致vue-awsome-swiper（version: 3.1.3）组件出现了异常。具体异常如下图所示：  在.vue文件中，我倒计时的计时器没有拆分成组件，直接在当前页面进行倒计时相关逻辑操作，直接导致swiper异常，影响到了swiper组件，具体原因尚不清楚。 我自己的解决办法是，直接把倒计时拆分成一个组件，并引用...
vue中定时器实时更新时间，页面加载慢
huai42717的博客
04-28 740
【代码】vue中定时器实时更新时间，页面加载慢。
Loading 加载直到数据加载完再消失（vue-elementui）
Amouzy的博客
12-07 5273
自定义指令v-loading async 函数 await 表达式
vue加载动画element ui V-loading属性 踩坑记录
m0_47733490的博客
12-14 2874
根据需求，由预览按钮打开弹窗，且弹窗需要渲染的数据较多，渲染的速度比较慢，所以要加一个加载中的效果，element ui的 v-loading属性就正好可以解决这一需求，但是当加入这一属性之后发现，是实现了加载功能，但是加载并不能自己判断何时停下，又不像其他页面需要页面刷新的时候出现加载动画效果，所以给diglog弹窗一个加载动画，但如何判断他何时停下呢 想了好几种办法最后想通了，在点击弹窗的时候先给一个加载属性为true，让他加载，然后等请求接口赋值以后，再给他一个属性为false关掉加载，..
vue中setInterval定时器带来的坑
baidu_35523558的博客
07-04 454
定时刷新问题解决了，但是还有一个问题：初始化页面的时候没有调用定时器里的方法；背景：最近要做一个大屏页面，需要根据用户配置，定时刷新页面（1s、5s等等）；发现问题：定时器并没有起作用，规定时间内并没有自动刷新；把定时器里的方法拿出来单独执行一次，完美解决；
setInterval存在的问题
程序员小曲的博客
03-30 1587
1.setInterval机制： 延时一段时间后，将任务push到任务队列中排队执行； 在每次把任务 push 到任务队列前，都要进行一下判断(看上次的任务是否仍在队列中，如果有则不添加，没有则添加)。 基于该原理，会导致两个问题： 前一任务结束到当前任务开始的时间间隔与设置的delay值不符。 可能出现某些任务被跳过的情况 （1）任务添加的时间间隔误差较大的情况 setInterval(foo, delay) //当foo执行消耗800ms，delay为1000ms时，前一个任务执行结束到后一个任
（九）vue定时setInterval与延迟setTimeout
w_t_y_y的博客
04-07 4389
定时函数setInterval，销毁定时clearTimeout。 如页面没隔10s从后台获取下当前时间 <template> <div>时间{{timeStr}}</div> </template> <script> import { getTime } from "@/api/test"; export default { ...
php无限加载,使用vue-infinite-loading实现无限加载功能
06-07
好的，我可以为您提供关于使用vue-infinite-loading实现php无限加载的一些指导。 首先，您需要安装vue-infinite-loading。可以通过npm或yarn安装，具体操作为： ``` npm install vue-infinite-loading --save ``` 或 ``` yarn add vue-infinite-loading ``` 安装完成后，在您的Vue组件中引入该组件： ```javascript import InfiniteLoading from 'vue-infinite-loading'; export default { components: { InfiniteLoading, }, }; ``` 接下来，您需要在组件的template中使用该组件，并在data中定义需要加载的数据列表和当前页码： ```html <template> <div> <ul> <li v-for="item in list" :key="item.id">{{ item.title }}</li> </ul> <infinite-loading @infinite="infiniteHandler"></infinite-loading> </div> </template> <script> export default { data() { return { list: [], page: 1, }; }, methods: { infiniteHandler($state) { // 这里使用ajax请求获取数据，page为当前页码 axios.get('/api/list', { params: { page: this.page, }, }).then((res) => { if (res.data.length > 0) { this.list = this.list.concat(res.data); this.page += 1; $state.loaded(); } else { $state.complete(); } }); }, }, }; </script> ``` 在上面的代码中，我们使用axios发送ajax请求获取数据，并在请求成功后使用concat方法将新数据追加到原数据列表中。同时，我们使用$state.loaded()方法告诉vue-infinite-loading组件数据已经加载完毕，可以继续加载下一页数据。如果返回的数据为空，则使用$state.complete()方法告诉vue-infinite-loading组件数据已经全部加载完毕。 最后，您需要在样式中设置vue-infinite-loading组件的高度和样式： ```css .vue-infinite-loading { height: 60px; line-height: 60px; text-align: center; } ``` 这样就完成了使用vue-infinite-loading实现php无限加载的操作。希望以上内容能够对您有所帮助。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值