我可以在另一个setTimeout中有一个setTimeout吗？ [英] can I have a setTimeout inside another setTimeout?
问题描述
这是一个快速（破产）的jsfiddle： http://jsfiddle.net/wH2qF/
Here's a quick (broke) jsfiddle: http://jsfiddle.net/wH2qF/
由于某种原因这不起作用......是因为我在另一个setTimeout中有一个setTimeout吗？
This isn't working for some reason... is it because I have a setTimeout inside another setTimeout?
$(function() {
$("#Volume").click(function() {
setTimeout(triggerVolumeChange, 4000);
function triggerVolumeChange()
{
var volumeDiv = document.getElementById("volumeNumber");
var volumeOld = 8;
var volumeNew = 37;
var timeNew = (1000/(volumeNew-volumeOld));
changeVolume();
function changeVolume()
{
volumeDiv.innerHTML = volumeOld;
volumeOld++;
if (volumeOld <= volumeNew) setTimeout(changeVolume, timeNew);
};
});
});
为了清楚起见，我应该指明从Click功能中删除其他东西，并澄清什么不是工作正常，好吧，基本上，我点击并没有任何反应，而如果我删除这一块代码它工作正常...实际上变量的设置也工作正常（我自然是假设）但是当我粘贴或取消注释changeVolume（）函数然后点击停止再次工作...有什么想法吗？
Should specify that for clarity purposes I deleted other things from that Click function, and also to clarify what doesn't work exactly, well, basically, I click and nothing happens, whereas if I cut out this chunk of code it works fine... actually the setting of the vars also work fine (naturally I presume) but when I paste or uncomment the changeVolume() function then the click stops working again... Any thoughts?
-
另一个澄清：我正在尝试做的是点击，在一个字符串中模拟从值8到37的音量..因此该函数内的setTimeout。
Another piece of clarification: What I'm trying to do is, on click, simulate the volume going from value 8 to 37, in a string.. thus the setTimeout inside that function.
-
根据你的家伙的要求，这里是完整的代码......我怀疑它是否有意义，但这里是... FYI，on单击此按钮将触发大量动画以模拟我正在设计的应用程序的流程。
As per your guy's request, here's the entire code... I doubt it will make sense, but here it is... FYI, on click this will trigger a number of animations to simulate the flow of an application I'm designing..
<script>
$(function() {
$("#Volume").click(function() {
var userPrompt = document.getElementById("userPrompt")
userPrompt.innerHTML = "Change volume to 37";
var avatarIcon = document.getElementById("avatarIcon");
avatarIcon.innerHTML = "<img src='imgs/haloIcons-volume_82x76.png' alt='Volume'/>";
var hints = document.getElementById("hints");
hints.style.opacity = 0;
$(".dragonTvOut").toggleClass("dragonTvIn");
setTimeout(triggerP, 1000);
function triggerP()
{
var halo = document.getElementById('avatar');
if( 'process' in halo ) {
halo.process();
};
};
setTimeout(triggerUserPrompt, 2000);
function triggerUserPrompt()
{
document.getElementById("userPrompt").className = "userPromptIn";
};
setTimeout(triggerVolumeChange, 4000);
function triggerVolumeChange()
{
document.getElementById("userPrompt").className = "userPromptEnd";
var halo = document.getElementById('avatar');
if( 'resume' in halo ) {
halo.resume();
}
document.getElementById("avatarIcon").className = "avatarIconEnd";
var volumeDiv = document.getElementById("volumeNumber");
var volumeOld = 8;
var volumeNew = 37;
var timeNew = (1000/(volumeNew-volumeOld));
changeVolume();
function changeVolume()
{
volumeDiv.innerHTML = volumeOld;
volumeOld++;
if (volumeOld <= volumeNew) setTimeout(changeVolume, timeNew);
};
var side = 100;
var paper = new Raphael(volumeArcAnim, 100, 300);
paper.customAttributes.arc = function (xloc, yloc, value, total, R) {
var alpha = 360 / total * value,
a = (90 - alpha) * Math.PI / 180,
x = xloc + R * Math.cos(a),
y = yloc - R * Math.sin(a),
path;
if (total == value) {
path = [
["M", xloc, yloc - R],
["A", R, R, 0, 1, 1, xloc - 0.01, yloc - R]
];
} else {
path = [
["M", xloc, yloc - R],
["A", R, R, 0, +(alpha > 180), 1, x, y]
];
}
return {
path: path
};
};
var arcWidth = 87;
var strokeRadius = arcWidth/2;
var indicatorArc = paper.path().attr({
"stroke": "#ffffff",
"stroke-width": 3,
arc: [side/2, side/2, 12, 100, strokeRadius]
});
indicatorArc.animate({
arc: [side/2, side/2, 60, 100, strokeRadius]
}, 1500, "<>", function(){
// anim complete here
});
};
});
});
</script>
推荐答案
在你破碎的例子中 http://jsfiddle.net/wH2qF/ 有一些问题
In your broken example http://jsfiddle.net/wH2qF/ there are a few problems
- 你忘了告诉jsfiddle使用jQuery
- 卷跨度的id（在JS中）是
ph但应该是volumeNumber（如在HTML中）
- You forgot to tell jsfiddle to use jQuery
- The id of the volume span (in JS) was
phbut should bevolumeNumber(as in the HTML)
您选择了jQuery吗？来自jsfiddle中的库，你会看到一个错误
Had you selected jQuery from the libraries in jsfiddle, you would have seen an error
未捕获TypeError：无法设置属性'innerHTML'为null
Uncaught TypeError: Cannot set property 'innerHTML' of null
这让我相信你的jsfiddle不能很好地代表你的问题。也许尝试创建另一个减少，因为你添加的只有愚蠢的错误？
That leads me to believe that your jsfiddle is not a good representation of your problem. Maybe try to create another reduction since the one you added only had "silly" errors?
这篇关于我可以在另一个setTimeout中有一个setTimeout吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
