轮播图混乱？setTimeout和setInterval要背锅

最新推荐文章于 2022-11-11 12:16:15 发布
最新推荐文章于 2022-11-11 12:16:15 发布
阅读量1.1k 收藏 1
点赞数
文章标签： 轮播图混乱 轮播图乱
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37569244/article/details/79829433
版权

当页面失去焦点的时候，比如：我切换到另一个页面，我把浏览器最小化

页面的重绘会停止，但是setTimeout的函数一直在调用。

比如，有一个div 你给他设置了transition ： all 1s

你通过setTimeout 使他的宽度每秒增加100px

现在切换页面等待5秒，回去会发现他直接在1s内增加了500px

如何避免这种情况？

这就需要用js来控制元素的样式

用window.requestAnimationFrame来实现动画效果

vue
关注
定时器+echarts运行时间太长导致内存溢出页面崩溃
langziangTom的博客
02-27 2815
echarts运行时间太长导致内存溢出页面崩溃
在css中插入轮播图，结果显示图片到处乱跑，不在一个框子内
2023年最新地推相关信息
03-19 422
轮播图显示图片到处乱跑，不在一个框子内，这个该怎么办，想让它在页面左边。
h5滚动导致setTimeout设置的动画错乱
风烟
01-19 399
解决思路，在滚动的时候停止播放动画，在滚动停止的时候恢复动画显示 addEventScorll() { let t1 = 0; let t2 = 0; document.onscroll = function() { clearTimeout(this.time); t1 = document.docum...
利用setTimeout && setInterval实现图片轮播
qq_24973007的博客
08-05 1785
作者原创，转载请注明来源 :-) setTimeout(a,b); 在b/1000秒后执行a函数（只执行一次） var c = setInterval(a,b); 每b/1000秒执行一次a函数，知道遇到 clearInterval（c）;结束 两者逻辑并用实现图片轮播： <html> <head> <meta http-equiv="Cont...
定时器+延时器（轮播图的实现）
weixin_44978043的博客
09-09 588
定时器 JavaScript语法服务网页效果，网页中经常会出现一些指定时间、指定周期执行的动画效果。语法中提供了两种定时器函数支持指定时间执行、指定周期执行的效果 setTimeout(fn,time) ：在指定的time（ms）时间之后执行某个函数fn setInterval（fn,time）:玄幻间隔时间time（ms）之后执行某个函数fn 基本语法 setTimeout(function() { console.log('我是延时两秒后执行的延时器') },2000) setInterval(f
Javascript中setTimeOut和setInterval的定时器用法
01-19
Javascript的setTimeOut和setInterval函数应用非常广泛，它们都用来处理延时和定时任务，比如打开网页一段时间后弹出一个登录框，页面每隔一段时间发送异步请求获取最新数据等等。但它们的应用是有区别的。 ...
CSS3 translate实现轮播图丝滑般翻页，setInterval实现定时器等常见操作。
08-13
在本项目中，我们利用CSS3的`translate`属性和JavaScript的`setInterval`函数来实现一个具有丝滑般翻页效果的轮播图。下面将详细探讨这两个技术点。 首先，`CSS3 translate`是CSS3变换（Transform）模块中的一个...
setTimeout和setInterval的浏览器兼容性分析
10-31
### setTimeout和setInterval的浏览器兼容性分析 #### 一、概述 `setTimeout` 和 `setInterval` 是JavaScript中用于处理延时与周期性任务的重要函数。它们被广泛应用于各种前端开发场景，例如页面动画效果、轮询...
VUE中setTimeout和setInterval自动销毁案例
10-14
在Vue.js应用中，我们经常会遇到使用`setTimeout`和`setInterval`来实现某些延时或周期性操作。然而，如果不正确地管理这些定时器，它们可能会在组件被销毁后仍然继续运行，导致不必要的资源消耗和潜在的问题。本文...
快速掌握Node.js中setTimeout和setInterval的使用方法
12-23
今天先学下setTimeout和setInterval的使用。 一、setTimeout超时计时器(和GCD中的after类似) 在node.js中可以使用node.js内置的setTimeout(callback,delayMillSeconds,[args])方法。当调用setTime()时回调函数会在...
vue-splide 轮播图在切换页面时重新回到原页面之后轮播图片顺序错乱或者被替换掉的bug解决办法
最新发布
SpriteDD的博客
11-11 1135
vue-splide 轮播图在切换页面时重新回到原页面之后轮播图片顺序错乱或者被替换掉的bug解决办法
js定时器的用法
m0_59735348的博客
08-08 348
js 定时器有以下两个方法： setInterval() ：按照指定的周期（以毫秒计）来调用函数或计算表达式。方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。 setTimeout() ：在指定的毫秒数后调用函数或计算表达式。 setInterval() ： 以下是实例在每 2000 毫秒执行 clock() 函数。实例中也包含了停止执行的按钮: <html> <body> <input type="text" id="clock"
轮播器连续点击问题
shaonian1996
08-22 1033
                                    轮播器连续点击问题 目的：当一次轮播结束方可点击进行下一次轮播 方法：如果轮播器使用的是transition：动画未结束不可再进行下次轮播 var flag = false; oRight.onclick = function(){ if(flag) return; //如果是true表示动画未结束...
JavaScript--利用setInterval或setTimeout实现背景颜色轮播
博客
08-16 3696
Window属性---暂停和定时器 暂停 var timeoutObj = setTimeout("执行程序",毫秒) setTimeout(引用，1000)setTimeout("执行程序",1000) clearTimeout(timeoutObj) 定时器 var intervalObj = setInterval(("执行程序",毫秒) setInterval
Js先触发失去焦点事件再执行点击事件解决方法
嗨皮田酱的博客
11-29 2万+
最近在做公司的某个从项目，基本设计和淘宝登陆页类似： 1）文本框内容为空是，文本框右侧无清除按钮，当有内容时立即显示清除按钮； 2）当文本框失去焦点时，清除按钮消失，获取焦点时若文本框内有内容，则显示清除按钮，否则不显示； 3）文本框再有内容且获取焦点的情况下，点击清除按钮，文本框内容置空，且清除按钮消失。 随后想了想，感觉是个很简单的需求，只要结合使用keyup和blur以及click时间
JS实现无缝切换轮播图(自动+手动)
热门推荐
清风的博客
07-01 5万+
说起轮播图，大家应该都不陌生，各大购物网站和面试题里都能看到它的身影。 实现上也并不困难，而写这篇文章是想整理一下自己心血来潮写的代码，以及实现过程中的一些思考，大家也可以顺便复习巩固一下。 今天给大家带来的是过渡动画等效果都由JS实现的无缝轮播图。CSS实现轮播图等以后再写。
原生 JS 实现无缝轮播图（进阶版）
杏子
02-22 2万+
上一篇有讲到原生 JS 实现无缝轮播图基础版；这一篇主要实现进阶版，包括左右按钮点击功能以及指示灯功能。
使用swiper出现样式错乱的问题，解决方法
誓言不轻信，谎言不枉听
09-06 1万+
正确的布局； 打开页面是这样的； 那么解决的办法是： 在swiper初始化内添加这两个属性就可以了； observer:true,//修改swiper自己或子元素时，自动初始化swiper observeParents:true,//修改swiper的父元素时，自动初始化swiper ...
jquery标签页切换导致轮播混乱（“动画累积”）问题解析
github_39532240的博客
02-05 1848
用jquery写了一个轮播页面，该页面的自动轮播和点击跳转一切正常；但后来发现一个奇怪的现象，当我切换到另一个标签页并在此停留一段时间后，再次返回轮播页，发现该页面的轮播效果混乱了，图片在快速的切换，但此时的指示器却是正常运转的；过了一段时间才变成正常的轮播效果；   开始时觉得百思不得其解（毕竟我是个菜鸟），自己试着调了调，没找到解决方法（我果然是个菜鸟）；于是只好求助某搜索工具了，在某乎找到
掌握BOM系列基础：setTimeout与setInterval详解
本文档深入探讨了BOM（Browser Object Model）系列的第一篇文章，焦点集中在JavaScript中的两个核心定时器函数：setTimeout()和setInterval()。这两个方法在网页开发中扮演着重要角色，帮助开发者实现异步操作，提高...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值