标签：等于 ogr bsp 定时器 执行 进度 时长 需求 提示
做一个进度条长度逐渐减少的动画，当进度条长度小于等于0时，关闭动画，并弹出透明底板显示新提示。
初始代码如下：
//设置进度条初始长度 var progressLength = 180; //设置一个定时器 var timer = setInterval(function () { //开始游戏后进度条逐渐消失 progressLength -= 10; $(".progress").animate({ width: progressLength }); console.log("hh"); //如果进度条走到尽头 if (progressLength <= 0) { clearInterval(timer); $(".over").fadeIn(100); } }, 50);
遇到问题：
进度条递减的速度快于动画速度，导致动画还没执行完，progressLength就已经≤0，底板就弹出来了。
首先，导致问题的原因是：
animate动画执行有默认时长，即1000（1s），就是第二个参数。
而先前设置的定时器执行时长是50，导致两厢不匹配，即animate函数域里外不是一个速度。
解决方法：（消灭时间差）
1.设置animate第二个参数，使执行时长等于外面定时器的执行时长；
（不推荐，因为两个函数之间总有执行上的时间差）
//设置进度条初始长度 var progressLength = 180; //设置一个定时器 var timer = setInterval(function () { //开始游戏后进度条逐渐消失 progressLength -= 10; $(".progress").animate({ width: progressLength },50); console.log("hh"); //如果进度条走到尽头 if (progressLength <= 0) { clearInterval(timer); $(".over").fadeIn(100); } }, 50);
2.改animate为css，这样就变成静态函数，没有时间差了
//设置进度条初始长度 var progressLength = 180; //设置一个定时器 var timer = setInterval(function () { //开始游戏后进度条逐渐消失 progressLength -= 10; $(".progress").css({ width: progressLength }); console.log("hh"); //如果进度条走到尽头 if (progressLength <= 0) { clearInterval(timer); $(".over").fadeIn(100); } }, 50);
标签：等于 ogr bsp 定时器 执行 进度 时长 需求 提示
原文地址：https://www.cnblogs.com/bbcfive/p/10144629.html
