好的,所以我创建了一个简单的计数器,从一个设定的数字开始计数,我知道如果计数器达到9999就有一定的限制,但我并不关心这些,因为用户不会在这个页面很长。
我所关心的是我遇到的一个闪烁问题,如果你在操作系统上切换标签或切换程序并返回浏览器,数字就会闪烁。
例如,只需尝试下面的小提琴,然后尝试使用alt + tab到另一个程序10秒然后返回,你应该看到闪烁。
提前感谢任何可以告诉我导致这种情况的人!正如您从代码中看到的那样,我已经使用WebWorker作为计时器,因为我读到使用此webworker中的设置间隔在切换选项卡时甚至可以作为后台任务工作,但仍然存在问题。
守则:
var currentDigit = 5;
// makeWebWorker is a little wrapper for generating a web worker to handle timing and destroying it.
function makeWebWorker(script) {
var URL = window.URL || window.webkitURL;
Blob = window.Blob,
Worker = window.Worker;
if (!URL || !Blob || !Worker || !script) {
return null;
}
var blob = new Blob([script]),
worker = new Worker(URL.createObjectURL(blob));
return worker;
}
function setupCountTimer() {
var timerCode = "self.addEventListener('message', function(e) { var data = e.data;var date = new Date();console.log(date);if (data.cmd=='start') {postMessage(data.msg);setInterval(function(){postMessage('message');},850)}} ,false);";
// CREATE TIMER (To run within web worker)
if(!_bgTimer) {
var _bgTimer = makeWebWorker(timerCode);
_bgTimer.postMessage({'cmd':'start'});
_bgTimer.onmessage = function(e) {
count();
};
}
}
function incrementNumber(digit, value) {
var el = $('.numbers p:nth-child(' + digit + ')'), // Element
newValue = value + 1;
el.animate({
marginTop: "-150px"
}, 200, "swing", function() {
el.text(newValue);
el.animate({
marginTop: "150px"
}, 0, function() {
el.animate({
marginTop: "0px"
}, 200, "swing");
});
});
}
function checkThirdNumber() {
var nextDigit = currentDigit - 2,
nextEl = $('.numbers p:nth-child(' + nextDigit + ')'), // Element
nextValue = parseInt(nextEl.text());
if (nextValue < 9) {
currentDigit = nextDigit;
incrementNumber(currentDigit, nextValue);
currentDigit = nextDigit + 2;
} else {
incrementNumber(nextDigit, - 1);
checkFourthNumber();
}
}
function checkFourthNumber() {
var nextDigit = currentDigit - 2,
nextEl = $('.numbers p:nth-child(' + nextDigit + ')'), // Element
nextValue = parseInt(nextEl.text());
if (nextValue < 9) {
currentDigit = nextDigit;
incrementNumber(currentDigit, nextValue);
currentDigit = nextDigit + 2;
} else {
incrementNumber(nextDigit, - 1);
}
}
function checkNextNumber() {
var nextDigit = currentDigit - 1,
nextEl = $('.numbers p:nth-child(' + nextDigit + ')'), // Element
nextValue = parseInt(nextEl.text());
if (nextValue < 9) {
currentDigit = nextDigit;
incrementNumber(currentDigit, nextValue);
currentDigit = nextDigit + 1;
} else {
incrementNumber(nextDigit, - 1);
checkThirdNumber();
}
}
function count() {
var el = $('.numbers p:nth-child(' + currentDigit + ')'), // Element
currentValue = parseInt(el.text()); // Element value
if (currentValue < 9) {
incrementNumber(currentDigit, currentValue);
} else if (currentDigit >= 2 && currentDigit < 6) {
incrementNumber(currentDigit, - 1);
checkNextNumber();
} else {
currentDigit = 0;
}
}
setupCountTimer();
答案 0 :(得分:0)
对于任何感兴趣的人,我设法通过使用jQuery promise函数顺序运行所有动画来解决这个问题。执行此操作的函数是下面的“runAnimations”,我的函数“incrementNumber”的更新版本也适用于此,对于任何感兴趣的人都会在下面列出......
// Run animations sequentially using jQuery promise
var runAnimations = function(functionArray){
var func = functionArray.splice(0,1);
func[0]().promise().done(function(){
if(functionArray.length > 0 ) {
runAnimations(functionArray);
}
});
}
function incrementNumber(digit, value) {
var $el = $('.numbers p:nth-child(' + digit + ')'), // Element
newValue = value + 1;
// Animate current number out
numberOut = function() {
$el.animate({marginTop: "-150px"}, 200, "swing");
return $el;
};
// Setup the next number
setNextNumber = function() {
$el.text(newValue);
$el.css({marginTop: "150px"});
return $el;
};
// Animate next number in
numberIn = function() {
$el.animate({marginTop: "0px"}, 200, "swing");
return $el;
};
runAnimations([numberOut,setNextNumber,numberIn]);
}