Javascript/Jquery object.array.push（）

Question

私はjsプログラミングでは新しいですが、何か問題があります。この例は私の問題を単純化したものです。ここでは機能があります：コンソールから

function sendOrder(){ 

    var someObject = {items:[]}; 

    $(document).ready(function(){    
     // pushing some item to array in object 
     someObject.items.push({Name: "Orange", Quantity: 2, OrderUnit: "kg"}); 
    }); 

    // pushing second item to array in object 
    someObject.items.push({Name: "Lemon", Quantity: 3, OrderUnit: "kg"});  

    console.log(JSON.stringify(someObject)); //print object 
} 

結果は次のとおりです。

{"items":[{"Name":"Lemon","Quantity":3,"OrderUnit":"kg"}]} 

私の質問は：レモンは、オブジェクト内の配列にプッシュされている理由とオレンジではないでしょうか？

Answer 1

あなたscript要素からすぐsendOrderを呼び出す場合、DOMは、文書の準備ができていることを通知する前に、それが実行されます。これはあなたのconsole.log呼び出しが実行されたときです。

一方、$(document).ready(...)に渡す関数は、の後にのドキュメントがロードされたことを通知するときにのみ実行されます。その項目も配列に追加されますが、既に実行されたconsole.logで表示するには遅すぎます。

どちらかあなたは結果を表示する前に、両方のpushのコールが起こっているように、$(document).readyに渡されたコールバック関数の最後でconsole.logを移動したり、そこから出pushを移動します。最初のケースでは、注文はあなたが期待するものとは反対になります。

Answer 2

console.logは、アレイの実際の状態を示しているが、documentの準備ができていないとオレンジオブジェクトがまだ押されていないので、それだけレモンオブジェクトを示しています。

1ms遅延を持つsetTimeout機能を追加して、console.logがページがロードされ、両方のアシメントが実行されるまで待つようにします。

注：：これは単なる不要なので、とにかくその機能を削除するのに最適なオプションです。

function sendOrder() { 
 

 
    var someObject = { 
 
    items: [] 
 
    }; 
 

 
    $(document).ready(function() { 
 
    someObject.items.push({ 
 
     Name: "Orange", 
 
     Quantity: 2, 
 
     OrderUnit: "kg" 
 
    }); //pushing some item to array in object 
 
    }); 
 

 
    someObject.items.push({ 
 
    Name: "Lemon", 
 
    Quantity: 3, 
 
    OrderUnit: "kg" 
 
    }); //pushing second item to array in object 
 

 
    setTimeout(() => { 
 
    console.log(someObject); //print object 
 
    }, 1); 
 

 
} 
 

 

 
sendOrder();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 3

私はにconsole.logオレンジpushコマンドが実行される前に実行されていることを想定しています。 $ document.ready.functionを使用すると、関数内のコードを実行する前にページ全体が読み込まれるまで待機します。したがって、document.ready.functionのコードは、document.ready.functionのコードが実行される前に実行されます。

Answer 4

とにかくコード化する前に、ページが安定した状態になるまでdocument.ready関数を使用してください。代わりに、console.logをdocument.readyに移動します。その時点で両方のオブジェクトが表示されます。

function sendOrder(){ 
 

 
var someObject = {items:[]}; 
 

 
$(document).ready(function(){    
 
    someObject.items.push({Name: "Orange", Quantity: 2, OrderUnit: "kg"}); //pushing some item to array in object 
 
    
 
    console.log(JSON.stringify(someObject)); //print object 
 
}); 
 

 
someObject.items.push({Name: "Lemon", Quantity: 3, OrderUnit: "kg"}); //pushing second item to array in object 
 

 

 
}

Answer 5

オレンジもアレイにありますが、console.logが追加される前に実行されるという問題があります。オレンジの後に他のconsole.logを追加すると、これを見ることができます。

function sendOrder(){ 
 

 
var someObject = {items:[]}; 
 

 
$(document).ready(function(){    
 
    someObject.items.push({Name: "Orange", Quantity: 2, OrderUnit: "kg"}); //pushing some item to array in object 
 
    console.log(JSON.stringify(someObject)); 
 
}); 
 

 
someObject.items.push({Name: "Lemon", Quantity: 3, OrderUnit: "kg"}); //pushing second item to array in object 
 

 
console.log(JSON.stringify(someObject)); //print object 
 
} 
 

 
sendOrder();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 6

この

$(document).ready(function() {...}) 

はちょうど文書の準備ができたら、それはすぐに実行されません、実行する機能を設定しています。あなたはこのように、要素のクリックに応答するために同様の形式を使用することができます。

$("#some-element").click(function() {...}) 

とあなただけのイベントが発生したときに実行することを期待すべきです。

Answer 7

document.readyのコールバックはすぐに呼び出されません。これは、ドキュメントがロードされたときに呼び出されます。ログが発生した後に呼び出されます。ここで何が起こっているかの例です：

var arr = []; 
 

 
setTimeout(function() { 
 
    arr.push("orange"); // will be pushed but after a second 
 
}, 1000); 
 

 
arr.push("apple");  // pushed right away (as a matter of fact pushed firstly because the above one is not evaluated so "orange" is not yet pushed 
 

 
console.log("First Log: ", arr); // logged right away (before "orange" is pushed) 
 

 
// Wait 2 second then log the array again 
 
setTimeout(function() { 
 
    console.log("Delayed Log: ", arr); // enough time has passed (both "apple" and "orange" are pushed) 
 
}, 2000);