title: Can I have a setTimeout inside a handler of another setTimeout?
body: <p>Here's a quick (broke) jsfiddle: <a href="http://jsfiddle.net/wH2qF/" rel="nofollow noreferrer">http://jsfiddle.net/wH2qF/</a></p>
  <p>This isn't working for some reason... is it because I have a setTimeout inside a handler of another setTimeout?</p>
  <pre><code>$(function() {
     $(&quot;#Volume&quot;).click(function() {
        setTimeout(triggerVolumeChange, 4000);
        function triggerVolumeChange() 
        {
            var volumeDiv = document.getElementById(&quot;volumeNumber&quot;);
            var volumeOld = 8;
            var volumeNew = 37;
            var timeNew = (1000/(volumeNew-volumeOld));
            changeVolume();
                          
            function changeVolume()
            {
               volumeDiv.innerHTML = volumeOld;
               volumeOld++;
               if (volumeOld &lt;= volumeNew) setTimeout(changeVolume, timeNew);
            };
        });
  });
  </code></pre>
  <p>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?</p>
  <p>--</p>
  <p>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.</p>
  <p>--</p>
  <p>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..</p>
  <pre><code>&lt;script&gt;
              $(function() {
                  $(&quot;#Volume&quot;).click(function() {
                                          
                      var userPrompt = document.getElementById(&quot;userPrompt&quot;)
                      userPrompt.innerHTML = &quot;Change volume to 37&quot;;
                                          
                      var avatarIcon = document.getElementById(&quot;avatarIcon&quot;);
                      avatarIcon.innerHTML = &quot;&lt;img src='imgs/haloIcons-volume_82x76.png' alt='Volume'/&gt;&quot;;
                  
                      var hints = document.getElementById(&quot;hints&quot;);
                      hints.style.opacity = 0;
                      $(&quot;.dragonTvOut&quot;).toggleClass(&quot;dragonTvIn&quot;);
                      
                      setTimeout(triggerP, 1000);
                      function triggerP()
                      {
                          var halo = document.getElementById('avatar');
                          if( 'process' in halo ) { 
                              halo.process();
                          };
                      };
                      
                      setTimeout(triggerUserPrompt, 2000);
                      function triggerUserPrompt() 
                      {
                          document.getElementById(&quot;userPrompt&quot;).className = &quot;userPromptIn&quot;;
                      };
                      
                      setTimeout(triggerVolumeChange, 4000);
                      function triggerVolumeChange() 
                      {
                          document.getElementById(&quot;userPrompt&quot;).className = &quot;userPromptEnd&quot;;
                          
                          var halo = document.getElementById('avatar');
                          if( 'resume' in halo ) { 
                              halo.resume();
                          }
  
                          document.getElementById(&quot;avatarIcon&quot;).className = &quot;avatarIconEnd&quot;;
                          
                          var volumeDiv = document.getElementById(&quot;volumeNumber&quot;);
                          var volumeOld = 8;
                          var volumeNew = 37;
                          var timeNew = (1000/(volumeNew-volumeOld));
                          changeVolume();
                          
                          function changeVolume()
                          {
                              volumeDiv.innerHTML = volumeOld;
                              volumeOld++;
                              if (volumeOld &lt;= 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 = [
                                      [&quot;M&quot;, xloc, yloc - R],
                                      [&quot;A&quot;, R, R, 0, 1, 1, xloc - 0.01, yloc - R]
                                  ];
                              } else {
                                  path = [
                                      [&quot;M&quot;, xloc, yloc - R],
                                      [&quot;A&quot;, R, R, 0, +(alpha &gt; 180), 1, x, y]
                                  ];
                              }
                              return {
                                  path: path
                              };
                          };
                      
                          var arcWidth = 87;
                          var strokeRadius = arcWidth/2;
                          
                          var indicatorArc = paper.path().attr({
                              &quot;stroke&quot;: &quot;#ffffff&quot;,
                              &quot;stroke-width&quot;: 3,
                              arc: [side/2, side/2, 12, 100, strokeRadius]
                          });
                          
                          indicatorArc.animate({
                              arc: [side/2, side/2, 60, 100, strokeRadius]
                          }, 1500, &quot;&lt;&gt;&quot;, function(){
                              // anim complete here
                          });
                          
                      };
                                              
                  });
              });
              &lt;/script&gt;
  </code></pre>