11

ここに簡単な（壊れた）jsfiddleがあります：http://jsfiddle.net/wH2qF/

これは何らかの理由で機能していません... 別の setTimeout のハンドラー内に 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);
          };
      });
});

明確にするために、そのクリック機能から他のものを削除したことを明記する必要があります。また、正確に機能しないものを明確にするために、まあ、基本的に、クリックしても何も起こりませんが、このコードのチャンクを切り取ると正常に動作します.. . 実際には、変数の設定も正常に機能します (当然だと思います) が、changeVolume() 関数を貼り付けたりコメントを外したりすると、クリックが再び機能しなくなります... 何か考えはありますか?

--

別の明確化: 私がやろうとしているのは、クリックすると、値 8 から 37 までのボリュームを文字列でシミュレートすることです..したがって、その関数内の setTimeout です。

--

あなたの男の要求に従って、ここにコード全体があります...意味があるとは思えませんが、ここにあります...参考までに、これをクリックすると、私が設計しているアプリケーションのフローをシミュレートするために多くのアニメーションがトリガーされます. .

<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>
4

5 に答える 5

5

はい、あなたはsetTimeout()別のものの中に持つことができます-これは時限イベントを繰り返すために使用される典型的なメカニズムです。

あなたが機能していない理由は、setTimeout()それ自体とは関係ありません。これは、関数をネストした方法と関係があります。

changeVolume()内部にある関数は、そのtriggerVolumeChange()名前を使用して直接参照できないことを意味します。

ネストを削除するのが最も簡単な解決策です。これchangeVolume()は、の内部にネストされるのではなく、ルートレベルになりますtriggerVolumeChange()。

于 2012-12-14T22:37:48.003 に答える
4

がありません}:

$(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);
          };
      } // that one was missing
   });
});
于 2012-12-14T22:35:57.753 に答える
3

あなたの壊れた例http://jsfiddle.net/wH2qF/にはいくつかの問題があります

  • jsfiddle に jQuery を使用するように指示するのを忘れていました
  • ボリューム スパンの ID (JS 内) は、 (HTML 内のように)phあるはずです。volumeNumber

動作中のバージョンを表示するには、ここをクリックしてください

jsfiddle のライブラリから jQuery を選択した場合、エラーが表示されます。

キャッチされていない TypeError: null のプロパティ 'innerHTML' を設定できません

それはあなたの jsfiddle があなたの問題をうまく表現していないと私に信じさせます。追加したものには「ばかげた」エラーしかなかったので、別の削減を作成してみてください。

于 2012-12-14T23:15:57.737 に答える
0

を使用したくない場合はsetInterval()、次の変更を加えてコードを機能させることができます。

$(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));
            var changeVolume = function () {
                volumeDiv.innerHTML = volumeOld;
                volumeOld++;
                if (volumeOld <= volumeNew) setTimeout(changeVolume, timeNew);
            };
            changeVolume();
        }
    });
});

jsFiddleでの作業デモ。

于 2012-12-14T23:06:24.477 に答える