设置间隔同时触发 [英] SetInterval firing at the same time
本文介绍了设置间隔同时触发的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在这段代码中的函数whatareyousingingpatrick(),上，每当调用新元素并且应该调用setInterval时，看起来不像是用新的original变量创建的新的，只是看起来像是一次又一次地触发相同的变量。：)
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<!DOCTYPE html>
<body onclick="whatareyousingingpatrick();" onkeypress="pretend();">
<span id="money">25</span>$ - <span id="lives">100</span>/100 lives - Level: <span id="level">1</span>
<br><br>
<span style="background-color:#c3c3c3;width:1000px;height:175px;overflow:hidden;position:relative;display:block;" id="track"></span>
<br>
<span id="divthing" style="position:relative;display:block;"></span>
<script>
money = 25;
lives = 100;
mycars = {};
function doofus() {
if($("div:first").offset().left > 1000){
$("div:first").remove();
lives = lives-1;
document.getElementById("lives").innerHTML = lives;
}
}
function dodat() {
var btn = document.createElement("div");
btn.style.width = "25px";
btn.style.height = "25px";
btn.style.backgroundColor = "red";
btn.style.boxShadow = "inset 0px 0px 0px 2px black";
btn.style.position = "absolute";
btn.style.left = "0px";
btn.style.webkitTransition = "opacity 1s";
var numba = Math.round(Math.random() * 50);
btn.class = "haha";
btn.id = numba;
mycars[numba] = -50;
var move = function () {
mycars[numba] = mycars[numba] + 1.5;
document.getElementById(numba).style.left = mycars[numba] + "px";
if(mycars[numba] > 100 && mycars[numba] < 150){
document.getElementById(numba).style.top = mycars[numba]/0.5-200 + "px";
}
};
setInterval(move, 10);
document.getElementById("track").appendChild(btn);
}
setInterval(dodat, 2000);
setInterval(doofus, 200);
function dis1() {
$("shooter").css("background-color", "red");
setTimeout('$("shooter").css("background-color", "blue");', '1000');
compareEl = $("#shoot1");
// Let's find the closest block!
var otherEls = $('div'),
compareTop = compareEl.offset().top,
compareLeft = compareEl.offset().left,
winningScore = Infinity,
score, winner, curEl;
otherEls.each(function () {
// Calculate the score of this element
curEl = $(this);
score = Math.abs(curEl.offset().left - compareLeft);
if (score < winningScore) {
winningScore = score;
winner = this;
}
});
document.getElementById(winner.id).style.opacity="0";
money = money+1;
document.getElementById("money").innerHTML=""+money+"";
}
function dis2() {
compareEl2 = $("#shoot2");
// Let's find the closest block!
var otherEls2 = $('div'),
compareTop2 = compareEl2.offset().top,
compareLeft2 = compareEl2.offset().left,
winningScore2 = Infinity,
score2, winner2, curEl2;
otherEls2.each(function () {
// Calculate the score of this element
curEl2 = $(this);
score2 = Math.abs(curEl2.offset().left - compareLeft2);
if (score2 < winningScore2) {
winningScore2 = score;
winner2 = this;
}
});
document.getElementById(winner2.id).style.opacity="0";
}
function dis3() {
compareEl3 = $("#shoot3");
// Let's find the closest block!
var otherEls3 = $('div'),
compareTop3 = compareEl3.offset().top,
compareLeft3 = compareEl3.offset().left,
winningScore3 = Infinity,
score3, winner3, curEl3;
otherEls3.each(function () {
// Calculate the score of this element
curEl3 = $(this);
score3 = Math.abs(curEl3.offset().left - compareLeft3);
if (score3 < winningScore3) {
winningScore3 = score;
winner3 = this;
}
});
document.getElementById(winner3.id).style.opacity="0";
}
function dis4(){
compareEl4 = $("#shoot4");
// Let's find the closest block!
var otherEls4 = $('div'),
compareTop4 = compareEl4.offset().top,
compareLeft4 = compareEl4.offset().left,
winningScore4 = Infinity,
score4, winner4, curEl4;
otherEls4.each(function () {
// Calculate the score of this element
curEl4 = $(this);
score4 = Math.abs(curEl4.offset().left - compareLeft4);
if (score4 < winningScore4) {
winningScore4 = score;
winner4 = this;
}
});
document.getElementById(winner4.id).style.opacity="0";
}
original = 0;
function whatareyousingingpatrick(){
if(money >= 1){
money = money+10000000;
original = original+1;
setInterval("dis"+original+"();alert("+original+");", original+500);
var btn = document.createElement("shooter");
btn.style.display = "block";
btn.id = "shoot"+original+"";
btn.style.height = "25px";
btn.style.width = "25px";
btn.style.backgroundColor = "blue";
btn.innerHTML = "<img src='http://www.bubblews.com/assets/images/news/1317280976_1370202845.png' style='height:100%;width:100%;border-radius:100%;opacity:0.7;'>";
btn.style.borderRadius= "100%";
btn.style.boxShadow= "0px 0px 200px 75px rgba(0, 0, 0, 0.2)";
btn.style.position = "absolute";
btn.style.left = event.pageX-20;
btn.style.top = event.pageY-250;
document.getElementById("divthing").appendChild(btn);
}
else{
alert("Sorry, this dude costs over 25 bucks.");
}
}
function pretend(){
if(money >= 60){
money = money-60;
if (event.keyCode == 49) {
alert("You have bought the FASTER SHOOTING upgrade for your first missile. Note that you can purchase this upgrade an unlimited number of times.");
setInterval("dis1();", "1000");
}
if (event.keyCode == 50) {
alert("You have bought the FASTER SHOOTING upgrade for your second missile. Note that you can purchase this upgrade an unlimited number of times.");
setInterval("dis2();", "1000");
}
if (event.keyCode == 51) {
alert("You have bought the FASTER SHOOTING upgrade for your third missile. Note that you can purchase this upgrade an unlimited number of times.");
setInterval("dis3();", "1000");
}
if (event.keyCode == 52) {
alert("You have bought the FASTER SHOOTING upgrade for your fourth missile. Note that you can purchase this upgrade an unlimited number of times.");
setInterval("dis4();", "1000");
}
}
else
{
alert("Sorry, the cost of the FASTER SHOOTING upgrade for this missile is 60$");
}
}
</script>
<script>
setTimeout('document.getElementById("level").innerHTML="2";setInterval(dodat, 8000);', '40000');
</script>
<br><br>
推荐答案
我没有阅读您的所有代码。但这至少解决了您的部分问题：
setInterval("dis"+original+"();alert("+original+");", original+500);
应为：
setInterval(function(){
var func = 'dis' + original;
func();
alert(original); //for some reason
}, original+500);
这篇关于设置间隔同时触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
