0

これは簡単です。ユーザーがボタンをクリックしたときに実行される D3 トランジションを開始したいだけです。

ただし、D3endイベントはトランジションで正しく発生していないようです: へのトランジションを要求しましたが、属性が のみの場合にイベントが発生しているようrotate(120)です。endrotate45

これは私のコードです：

var angle = 0;
// handle click event
d3.selectAll('.mycolour').on('click', function() { 

d3.select("#loadingicon").remove(); 

// redraw the icon (excluded here for brevity)...
// setting the transform attribute to 0 explicitly.. 
group2.attr("transform", "rotate(0,0,0)");

// and start it turning:
angle = 0;
function rotateLoadingIcon() {
  angle = angle%360;
  angle += 120;
  console.log('rotateLoadingIcon', angle, group2.attr("transform"));
  d3.select(".icon").transition().ease("linear")
   .duration(4000)
   .attr("transform", "rotate(" + angle + ",0,0)")
   .each("end", function() { 
     angle += 120;
     console.log('innerRotateLoadingIcon', angle, group2.attr("transform"));    
     group2.transition().ease("linear")
       .duration(4000)
       .attr("transform", "rotate(" + angle + ",0,0)")
       .each("end", function() {            
         rotateLoadingIcon();
     });
   });
 }

 console.log('about to start icon loading');
 rotateLoadingIcon();

});

アイコンが初めて描画されるときに機能します。

 rotateLoadingIcon 120 rotate(0,0,0)
 innerRotateLoadingIcon 240 rotate(119.99999999999999)

しかし、2 回目以降のクリックの後、次のようなコンソール出力が生成されるのを見てきました。

about to start icon loading
rotateLoadingIcon 120 rotate(0,0,0)
innerRotateLoadingIcon 240 rotate(45.14999999999999)

実際には、これが意味することは、回転の方向が変わるということです:(

属性が にしか設定されていないのに、なぜinnerRotateLoadingIcon開始したのですか? 確かにコードを考えると、コードが最初に実行されるときのように、到達するまで開始するべきではありません。rotate45.1...rotate120

私が JavaScript をセットアップした方法は、2 つの異なるバージョンのrotateLoadingIconが同時に実行される可能性があることを意味するかどうか疑問に思っています。これは可能ですか、そうであれば修正できますか?

更新: 問題を示す JSFiddle を次に示しますsetIntervalがend、2 回クリックすると、回転の方向が変わることがわかります。理由はわかりません: http://jsfiddle.net/QtBvJ/

4

1 に答える 1

0

jsfiddle のバージョンでは、タイムアウトを適切にクリアするだけで機能します。関数setTimeoutは、に渡す必要がある参照を返しますwindow.clearTimeout。つまり、

var t = null;
...
window.clearTimeout(t);
...
t = setTimeout(...);

ここで働くフィドル。

于 2013-06-18T19:33:04.403 に答える