遅延onChange JavaScript関数が他のJavaScriptが終了するのに十分長いです

Question

3つの選択ボックスにonChange関数を指定して3つの値をすべて追加して隠しフィールドに入れるスクリプトを呼び出します。問題は、他のスクリプトの値に応じてボックスを変更することです。スクリプト2は、スクリプト1が選択オプションの値の変更を終了する前に値を保存します。

スクリプト1つの自動更新をオフに基づいて、日の値が年と月値

<script type='text/javascript'> 
    $().ready(function() { 
     $().dateSelectBoxes($('#release_month'),$('#release_day'),$('#release_year'),true); 
    }); 
</script> 

スクリプト2個のグラブすべての3日および1つの完全な日付を作ります。問題は、スクリプト1がその日を更新する前にこれを行うことです。

<script> 
    function datepopulate(){ 
    var day = document.getElementById('release_day').value.substr(-2); 
    var month = document.getElementById('release_month').value; 
    var year = document.getElementById('release_year').value; 
    var completedate = year+'-'+month+'-'+day; 
    document.getElementById('releasedate_value').value = completedate; 
     alert(document.getElementById('releasedate_value').value); 
    return true; 
} 

</script> 

スクリプト2はこのように呼び出されます。 1があるスクリプトが自動的に行われている間

<select onChange="datepopulate();"> </select> 

Answer 1

はあなたの.ready（...）セクションで、選択ボックスおよびチェーンロジックへのコールバックとしてdatepopulate（）関数でjQueryの.change（）イベントを添付でき。

Answer 2

dateSelectBoxesに関数の引数を追加すると、onchangeの代わりにdatepopulate自体が呼び出されます。

$().ready(function() { 
    $().dateSelectBoxes($('#release_month'),$('#release_day'),$('#release_year'),true, datepopulate); 
}); 

Answer 3

clickイベントコードが発生した後に余分なロジックを行うために、jQueryプラグインからコールバックを公開する必要があるようです。あなたが変更イベントへの2つのイベントを有線ましたが、それは最初に発射されたものをイベント決定論的であることを行っていないことから、あなたは同期の問題を抱えているようですね

<script type='text/javascript'> 
    $().ready(function() { 
     $().dateSelectBoxes($('#release_month'),$('#release_day'),$('#release_year'),true, function() 
      { 
       // Do Stuff after this plugin does its stuff 
      }); 
    }); 
</script> 

：だから、このようなものを持っているでしょう。コールバック・メカニズムを介してイベントを順序付けすることでこれを実行できる場合は、問題を解決する必要があります。

編集：コードをjQueryに変換するには、実際にはかなり簡単です。

var date = $('#release_year').val() + "-" + $('#release_month').val() + "-" + $('#release_day').val(); 

$('#releasedate_value').val(date); 

val()機能が照会の要素の値を返します。これは、jQueryのバージョンになります。あなたがIDで選択しているので、これは効果的に要素のvalueを返すことを意味します。その後、文字列を連結して、同じメソッドで隠し値に代入しますが、その値をパラメータとして割り当てます。

Answer 4

イベントが終了するまでJavaScriptで待機するためにタイムアウトを使用しないでください。何かが行われることを確認するための唯一の方法は、コールバックであり、そのことについて疑いを持っていないか、あなただけのこのかかわらを試してみてください多くのトラブル

に実行されます：

<script type='text/javascript'> 
$(document).ready(function() { 
    $.dateSelectBoxes($('#release_month'),$('#release_day'),$('#release_year'),true); 
    $("select").on("change", function(){ 
      var day = document.getElementById('release_day').value.substr(-2), 
     month = document.getElementById('release_month').value, 
     year = document.getElementById('release_year').value, 
     completedate = year+'-'+month+'-'+day; 
     if(day > 0 && month > 0 && year > 0){ 
      document.getElementById('releasedate_value').value = completedate; 
      alert(document.getElementById('releasedate_value').value); 
     } 
    }); 
}); 
</script> 

しかし、「正しい」方法をそれを行うには、すべてが選択されているなら、あなたは$("button").css("display", "block");その後、

$("button").on('click', function(){ 
    var day = document.getElementById('release_day').value.substr(-2), 
    month = document.getElementById('release_month').value, 
    year = document.getElementById('release_year').value; 
    document.getElementById('releasedate_value').value = year+'-'+month+'-'+day; 
    alert(document.getElementById('releasedate_value').value); 
}); 

Answer 5

私はそれが重要だと思いますかあなたはすべての選択ボックスが！= 0の値を持っていることを確認し変化に、ボタン<input type=button style="display:none">を持つことですこれが起こらない時があることを指摘するrkは適切です（jQuery 1。7）：

$('#element').html(some_really_large_value); 
console.log($('#element').html()); 

DOMの更新は、機能の実行をブロックしない、と#elementの以前の内容になりますコンソールに何を表示される時間があります。

上記の例の場合、$ .dateSelectBoxesにコールバックを追加しても問題は解決しないことがあります。これはまだ正しい値を返さない場合：

は

$.dateSelectBoxes(... $('#release_month') ... , function(){ 
    console.log($('#release_month').val()); 
}); 

その後、私はの知っている唯一の解決策は、競合状態を追加することです：

$.dateSelectBoxes(... $('#release_month') ... , function(){ 
    setTimeout(function(){ console.log($('#release_month').val()) }, 100); 
}); 

[UPDATE]

私が最近見つけていますここでの問題は、.html（）メソッドが関数の実行をブロックしているのではなく、ブラウザが関数のスコープ（またはそのようなものなど）によってDOMの更新をグループ化しているということではありません。

これは、.html（）および.val（）を使用したjQuery DOMの更新はブロックされますが、ブラウザによるDOM更新のスケジューリングについてのみブロックすることを意味します。したがって、setTimeout（fn、1）に読み込まれたDOMをラップすることさえ問題を解決します。

ところで、これはちょうどFrame.jsが解決するように設計されたものです。