javascriptのchromeでデバッグモードのバグを修正するにはどうすればよいですか？

Question

私の問題は、次のようになります。私は自分のWebページでエースエディタを持っている、と私は彼のサイズを変更する必要が

、ここでのコードは次のとおりです。

   var x = event.pageX; 
       pageParams = document.body.getBoundingClientRect(); 
       ace = document.getElementById("fileInfo"); 

       if (x > pageParams.width * 0.3) { 
        x = parseInt(pageParams.width * 0.3); 
       } 

       if(x < pageParams.width * 0.2) { 
        x = pageParams.width * 0.2; 
       } 

       $element.css({ 
        left: x + 'px' 
       }); 

       $($attrs.resizerLeft).css({ 
        width: x + 'px' 
       }); 


       var w = topContent.clientWidth; 
       var oldX = $($attrs.resizerRight).css('left'); 
       if(oldX.indexOf('px') > -1) { 
        oldX = parseFloat(oldX.substring(0, oldX.length - 2)); 
       } else { 
        oldX = parseFloat(oldX); 
       } 

       $($attrs.resizerRight).css({ 
        left: (x + parseInt($attrs.resizerWidth)) + 'px' 
      //  width: w + (oldX - x) + 'px' 
       }); 

       $('#fileInfo').css({ 
        width: ace.clientWidth - (oldX - x) + 'px' 
       }) 

       editor.resize(); 

最後の4行が重要であり、 （私のエースエディタ） 彼らは言って、fileInfo idを見つける（私のエースエディタ） 次に、それの幅を設定する（エースエディタの前の幅+カーソルの古い位置 - カーソルの新しい位置+ 'px' ） 最後の行は、実際にはエースエディタのサイズを変更できる行です。

私は信じて、私は私のロジックに誤りがなかったが、ここに私の問題が来る：

私は私のコードブレーク、GoogleのChromeとMozilla Firefoxの上でこのコードを実行すると、それは常に私のエディタの幅は減少しますが、一度私がブラウザのデバッグモードに入って（F12経由で）、コードの同じ部分にブレークポイントを設定すると、コードは動作します!!!!!!

私はそれを信じることができず、私はそれについて説明していません... デバッグモードとブレークポイント（ない）では動作しますが、ブレークポイントやデバッグモードがないと動作しません。 ..私は、私は自分自身を明らかにし、あなたが私を助けることができるでしょうことを願ってい

...

Thxを

プラス：

私はデバッグではないです後、私は、見つけましたモードでは、oldXは常にX変数より大きく、私は...そのことは、時々小さな時々大きいはずであるように、休憩で

Answer 1

をデバッグモードに入ると、それは

開発ツールここでは推測の仕事のビットですが、...デバッグモード私はいくつかのエフェクトを持っていますが、そのうちの1つは環境に非同期の性質を追加しています。 （基本的に、あなたのCSSは、デバッグモードなしでサイズ変更を行うと適用されないかもしれません）。私は、サイズ変更呼び出しのタイムアウトを追加しようとします。これを試してみて、それが問題を修正するかどうかを確認：

setTimeout(function(){ 
    editor.resize(); 
}, 20);