我可以在另一个 setTimeout 的处理程序中设置一个 setTimeout 吗? [英] Can I have a setTimeout inside a handler of another setTimeout?
问题描述
这是一个快速(坏掉的)jsfiddle:http://jsfiddle.net/wH2qF/>
由于某种原因这不起作用......是不是因为我在另一个 setTimeout 的处理程序中有一个 setTimeout?
$(function() {$("#Volume").click(function() {setTimeout(triggerVolumeChange, 4000);函数 triggerVolumeChange(){var volumeDiv = document.getElementById(volumeNumber");变量音量老 = 8;变量音量新 = 37;var timeNew = (1000/(volumeNew-volumeOld));更改音量()；函数 changeVolume(){volumeDiv.innerHTML = volumeOld;音量老++；if (volumeOld <= volumeNew) setTimeout(changeVolume, timeNew);};});});应该指出，为了清楚起见，我从该 Click 函数中删除了其他内容，并澄清了哪些内容不起作用，好吧，基本上，我点击后什么也没有发生，而如果我删掉这段代码，它就可以工作很好...实际上 vars 的设置也可以正常工作(我自然认为)但是当我粘贴或取消注释 changeVolume() 函数时，单击再次停止工作...有任何想法吗?
--
另一条说明:我想要做的是，在单击时，模拟字符串中从值 8 到 37 的音量..因此该函数内的 setTimeout.
--
根据您的要求，这里是整个代码...我怀疑它是否有意义，但这里是...仅供参考，单击这将触发许多动画来模拟应用程序的流程我'米设计..
是的，您可以在另一个内部使用 setTimeout() —— 这是用于重复定时事件的典型机制.
您的不工作的原因与 setTimeout() 本身无关；这与您嵌套函数的方式有关.
triggerVolumeChange() 中的 changeVolume() 函数意味着你不能直接使用它的名字来引用它.
对您来说最快的解决方案是删除嵌套，以便 changeVolume() 位于根级别而不是嵌套在 triggerVolumeChange() 中.
Here's a quick (broke) jsfiddle: http://jsfiddle.net/wH2qF/
This isn't working for some reason... is it because I have a setTimeout inside a handler of 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);
};
});
});
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?
--
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.
--
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>
Yes, you can have a setTimeout() inside another one -- this is the typical mechanism used for repeating timed events.
The reason yours isn't working is not to do with the setTimeout() itself; it's to do with the way you've nested the functions.
The changeVolume() function being inside triggerVolumeChange() means that you can't reference it directly using its name.
The quickest solution for you would be to remove the nesting, so that changeVolume() is at the root level rather than nested inside triggerVolumeChange().
这篇关于我可以在另一个 setTimeout 的处理程序中设置一个 setTimeout 吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
