您可以在http://jsfiddle.net/6h74c/266/
找到我正在处理的内容的副本 jQuery(document).ready(function ($) {
$('#imgbtn').click(function () {
var start = new Date();
var maxTime = 10000;
var maxTime2 = 1500;
var timeoutVal = Math.floor(maxTime / 100);
var timeoutVal2 = Math.floor(maxTime2 / 100);
var maxTime3 = 650;
var maxTime4 = 450;
var timeoutVal3 = Math.floor(maxTime3 / 100);
var timeoutVal4 = Math.floor(maxTime4 / 100);
function updateProgress(percentage) {
$('#pbar_innerdiv').css("width", percentage + "%");
$('#pbar_innertext').html("<span class='biglet'>256Kb/s</span></br><span class='littlelet'>30 seconds</span>");
};
function updateProgress2(percentage) {
$('#pbar_innerdiv2').css("width", percentage + "%");
$('#pbar_innertext2').html("<span class='biglet'>6Mb/s</span></br><span class='littlelet'>1.25 seconds</span>");
};
function animateUpdate() {
var now = new Date();
var timeDiff = now.getTime() - start.getTime();
var perc = Math.round((timeDiff / maxTime) * 100);
console.log(perc);
if (perc <= 100) {
updateProgress(perc);
setTimeout(animateUpdate, timeoutVal);
}
};
function animateUpdate2() {
var now = new Date();
var timeDiff = now.getTime() - start.getTime();
var perc = Math.round((timeDiff / maxTime2) * 100);
console.log(perc);
if (perc <= 100) {
updateProgress2(perc);
setTimeout(animateUpdate2, timeoutVal2);
}
};
function updateProgress3(percentage) {
$('#pbar_innerdiv3').css("width", percentage + "%");
$('#pbar_innertext3').html("<span class='biglet'>16Mb/s</span></br><span class='littlelet'>.5 seconds</span>");
};
function updateProgress4(percentage) {
$('#pbar_innerdiv4').css("width", percentage + "%");
$('#pbar_innertext4').html("<span class='biglet'>20Mb/s</span></br><span class='littlelet'>.25 seconds</span>");
};
function animateUpdate3() {
var now = new Date();
var timeDiff = now.getTime() - start.getTime();
var perc = Math.round((timeDiff / maxTime3) * 100);
console.log(perc);
if (perc <= 100) {
updateProgress3(perc);
setTimeout(animateUpdate3, timeoutVal3);
}
};
function animateUpdate4() {
var now = new Date();
var timeDiff = now.getTime() - start.getTime();
var perc = Math.round((timeDiff / maxTime4) * 100);
console.log(perc);
if (perc <= 100) {
updateProgress4(perc);
setTimeout(animateUpdate4, timeoutVal4);
}
};
animateUpdate();
animateUpdate2();
animateUpdate3();
animateUpdate4();
});
});
jQuery(document).ready(function ($) {
$('#musicbtn').click(function () {
var maxTime = 40000;
var maxTime2 = 6000;
var timeoutVal = Math.floor(maxTime / 100);
var timeoutVal2 = Math.floor(maxTime2 / 100);
var maxTime3 = 2500;
var maxTime4 = 2000;
var timeoutVal3 = Math.floor(maxTime3 / 100);
var timeoutVal4 = Math.floor(maxTime4 / 100);
function updateProgress(percentage) {
$('#pbar_innerdiv').css("width", percentage + "%");
$('#pbar_innertext').html("<span class='biglet'>256Kb/s</span></br><span class='littlelet'>2.5 minutes</span>");
};
function updateProgress2(percentage) {
$('#pbar_innerdiv2').css("width", percentage + "%");
$('#pbar_innertext2').html("<span class='biglet'>6Mb/s</span></br><span class='littlelet'>6 seconds</span>");
};
function animateUpdate() {
var now = new Date();
var timeDiff = now.getTime() - start.getTime();
var perc = Math.round((timeDiff / maxTime) * 100);
console.log(perc);
if (perc <= 100) {
updateProgress2(perc);
setTimeout(animateUpdate, timeoutVal);
}
};
function animateUpdate2() {
var now = new Date();
var timeDiff = now.getTime() - start.getTime();
var perc = Math.round((timeDiff / maxTime2) * 100);
console.log(perc);
if (perc <= 100) {
updateProgress2(perc);
setTimeout(animateUpdate2, timeoutVal2);
}
};
function updateProgress3(percentage) {
$('#pbar_innerdiv3').css("width", percentage + "%");
$('#pbar_innertext3').html("<span class='biglet'>16Mb/s</span></br><span class='littlelet'>2.5 seconds</span>");
};
function updateProgress4(percentage) {
$('#pbar_innerdiv4').css("width", percentage + "%");
$('#pbar_innertext4').html("<span class='biglet'>20Mb/s</span></br><span class='littlelet'>2 seconds</span>");
};
function animateUpdate3() {
var now = new Date();
var timeDiff = now.getTime() - start.getTime();
var perc = Math.round((timeDiff / maxTime3) * 100);
console.log(perc);
if (perc <= 100) {
updateProgress3(perc);
setTimeout(animateUpdate3, timeoutVal3);
}
};
function animateUpdate4() {
var now = new Date();
var timeDiff = now.getTime() - start.getTime();
var perc = Math.round((timeDiff / maxTime4) * 100);
console.log(perc);
if (perc <= 100) {
updateProgress4(perc);
setTimeout(animateUpdate4, timeoutVal4);
}
};
animateUpdate();
animateUpdate2();
animateUpdate3();
animateUpdate4();
});
$(document).click(function () { return ;});
});
jQuery(document).ready(function ($) {
$('#moviebtn').click(function () {
var start = new Date();
var maxTime = 1500000;
var maxTime2 = 80000;
var timeoutVal = Math.floor(maxTime / 100);
var timeoutVal2 = Math.floor(maxTime2 / 100);
var maxTime3 = 40000;
var maxTime4 = 21000;
var timeoutVal3 = Math.floor(maxTime3 / 100);
var timeoutVal4 = Math.floor(maxTime4 / 100);
function updateProgress(percentage) {
$('#pbar_innerdiv').css("width", percentage + "%");
$('#pbar_innertext').html("<span class='biglet'>256Kb/s</span></br><span class='littlelet'>4 hours</span>");
};
function updateProgress2(percentage) {
$('#pbar_innerdiv2').css("width", percentage + "%");
$('#pbar_innertext2').html("<span class='biglet'>6Mb/s</span></br><span class='littlelet'>8 minutes</span>");
};
function animateUpdate() {
var now = new Date();
var timeDiff = now.getTime() - start.getTime();
var perc = Math.round((timeDiff / maxTime) * 100);
console.log(perc);
if (perc <= 100) {
updateProgress(perc);
setTimeout(animateUpdate, timeoutVal);
}
};
function animateUpdate2() {
var now = new Date();
var timeDiff = now.getTime() - start.getTime();
var perc = Math.round((timeDiff / maxTime2) * 100);
console.log(perc);
if (perc <= 100) {
updateProgress2(perc);
setTimeout(animateUpdate2, timeoutVal2);
}
};
function updateProgress3(percentage) {
$('#pbar_innerdiv3').css("width", percentage + "%");
$('#pbar_innertext3').html("<span class='biglet'>16Mb/s</span></br><span class='littlelet'>5 minutes</span>");
};
function updateProgress4(percentage) {
$('#pbar_innerdiv4').css("width", percentage + "%");
$('#pbar_innertext4').html("<span class='biglet'>20Mb/s</span></br><span class='littlelet'>3 minutes</span>");
};
function animateUpdate3() {
var now = new Date();
var timeDiff = now.getTime() - start.getTime();
var perc = Math.round((timeDiff / maxTime3) * 100);
console.log(perc);
if (perc <= 100) {
updateProgress3(perc);
setTimeout(animateUpdate3, timeoutVal3);
}
};
function animateUpdate4() {
var now = new Date();
var timeDiff = now.getTime() - start.getTime();
var perc = Math.round((timeDiff / maxTime4) * 100);
console.log(perc);
if (perc <= 100) {
updateProgress4(perc);
setTimeout(animateUpdate4, timeoutVal4);
}
};
animateUpdate();
animateUpdate2();
animateUpdate3();
animateUpdate4();
});
;});
基本上我要做的是有三个按钮会导致进度条“pbar_innerdiv”从指定的超时时间变为0-100％。我的问题是，如果我点击按钮1，事情就会完美，条形图会正确加载。然而，如果在栏中间加载我点击按钮2，它会吓坏并尝试显示前一次单击按钮1和按钮2的css。
我的问题是，有没有办法在我点击按钮2然后再次开始动画后停止上一个按钮的javascript？基本上，杀死脚本的第一次迭代并使用按钮2的超时重新启动它。
这可能没有任何意义，但提前感谢任何帮助：）
答案 0 :(得分：1)
我的方法包括以下部分：
var progressShouldStopFlage= false;
var timer;
1-一个标志，指示进度条是继续还是停止。
2-一个定时器，用于保存setTimeOut操作的定时器，因此我们可以随时取消
3-我还添加了2个按钮作为使用我的解决方案可以实现哪些功能的示例。
停止按钮将停止进度条，而启动按钮应从头开始。
if (perc <= 100) {
if(progressShouldStopFlage)
{
clearTimeout(timer)
return;
}
updateProgress(perc);
当使用值更新条形图时，我正在检查进度是否应该继续，然后在单击停止按钮时取消进度。
如果这是你想要的，那么我很想帮忙，如果你还需要别的东西，请告诉我。
完整的代码可以在这个更新的小提琴中找到：http://jsfiddle.net/6h74c/272/