1

タグ内のテキストを変更しようとしていますh3が、関数が終了するまで変更は行われません。すぐにテキストを変更したい。

例えば：

<h3 id="myText"></h3>
<input type="button" onClick="changeText('Hello');">

<script type="text/javascript">
   function changeText(str){
      document.getElementById('myText').innerHTML = str;
   }
</script>

テキストを変更した直後に画面を更新することはできますか？（flush()Cのコマンドのように）。

コマンドの後にアフターを付けるalertと、テキストがすぐに変更されることに注意してください。

function changeText(str){
    document.getElementById('myText').innerHTML = str;
    alert('HelloWorld');
}
4

2 に答える 2

2

即時更新を強制するには、次のようにします。

document.getElementById('myText').innerHTML = str; // change the dom
setTimeout(function(){
   // do other things
}, 0);

コードはdo other things更新後に実行されます。

しかし、スクリプトが数秒間実行され続けることは非常に珍しいことです。

于 2013-01-23T12:32:18.903 に答える
0

すべてのページの更新について話している場合、クライアント側で変更したコンテンツはステートレスであるため (リクエスト間) 失われます。サーバー側のリポジトリ（セッション、アプリケーション、読み書きできるファイル、データベースなど）に永続化すると、サーバー側から読み取ってhtml要素に保持できます。

Javascript では、ディクショナリ (キーに要素 ID、値に innerHTML) を実装し、それをキャッシュとして使用し、すべての変更を表示するためのフラッシュ メソッドを実装できます。次のようなものを試してください。

<script>

var cacheChanges = {};

function addChange(element, value){
   cacheChanges[element] = value; 
}

function flush() {
  for(var i in cacheChanges)
  {
    var element = document.getElementById(i);
    if (element) {
      element.innerHTML = cacheChanges[i];
    }
  }
}


function ChangeSomething(){
  // do some changes
  addChange('myText', 'Hello');
  addChange('myText2', 'Hello 2');
  addChange('myText3', 'Hello 3');

  // apply all them
  flush();
}

</script>

そしてあなたのhtmlで：

  <h3 id="myText"></h3>
  <h3 id="myText2"></h3>
  <h3 id="myText3"></h3>

  <input type="button" onClick="ChangeSomething();">
于 2013-01-23T12:39:25.933 に答える