JSのミラクル。結果が異なる1つの関数

Question

これは奇跡です！それを理解するのを助けてください。

私は私のPHPファイルで一部のHTMLコードを持っている：

<form action="" method="post" name="r_form" > 
<table> 
<tr> 
<td> Name: </td> 
<td> <input type="text" name="r_name" id = "rname" /> </td> 
</tr> 
<tr> 
    <td align="center" colspan="2"> <img src="FE.png" width="40" height="40" id="firstentryID" onClick="nextFunc()"></td> 
</tr> 
</table> 
</form> 

そして、私のauth.phpでフォローコード：

<script type="text/javascript"> 

    Preload(); 
    nextFunc(); 

    function Preload() { 
    var valueToPush = {}; 
var name2 = []; 
    var userID1 = '<?php echo $id_user;?>'; 
        $.ajax({ 
         url: 'TR.php', 
         type: 'POST', 
         data: {userID1: userID1}, 
         success: function(data){ 
         var names = data 
       $('#result_div_id').html(data); 
          var json2 = $.parseJSON(data); 
        EntriesCount =json2.length; 
       $.each(json2, function() { 
       $.each(this, function(k, v){ 


    switch(k) { 
    case 'Name': 
     valueToPush.Name = v;  
     break; 

    // and more parametrs - it doesnt matter. 
    } 
    }); 

    name2.push({ID_Clients: valueToPush.id, Name: valueToPush.Name, Phone: valueToPush.Phone, Email: valueToPush.Email, Status: valueToPush.Status, Birthday: valueToPush.Birthday, ClientFrom: valueToPush.ClientFrom, User: valueToPush.User}); 

    }); 
    } 
    }); 
    } 
    ... 

そして、私のnextFunc（中）私が持っている：

を

function nextFunc(){ 

document.getElementById("rname").value = name2[currententry]['Name']; 
} 

私のJSONで私は持っているので：

[12] 
0: { 
ID_Clients: "87" 
Name: "Вася" 
Phone: "1234578" 
Status: "4" 
Birthday: "2016-10-21" 
ClientFrom: "4" 
User: "2" 
}- 
1: { 
ID_Clients: "88" 
Name: "Петя" 
Phone: "2345669" 
Status: "3" 
Birthday: "2016-10-11" 
ClientFrom: "2" 
User: "2" 
} ... and so on... 

奇跡です：

私はこのコードのように私のブロックからNextFunc（）を呼び出したとき、私は

捕捉されない例外TypeErrorを受け取る：NextFunc undefinedat（）

のプロパティ 'name' を読み込めません

私のWebページでFE.pngを押すとコードが動作しています!!!

WHY ????

Answer 1

は、私がpreLoad関数スコープで変数を定義するには、あなたの変数のスコープ内のあなたの問題は、その後、別のスコープからこの変数を呼び出そうとすることを確信しているCS

には奇跡はありません。これを解決する

、次のように、グローバルスコープに

をごname2変数を移動する必要があります。

var name2 = []; 
Preload(); 
nextFunc(); 

とあなたのPreload();関数内に、これはvar names2 = [];

Answer 2

この行をコメントあなたの問題。

Preloadを呼び出すと、JSONのダウンロードが開始されます。しかし、ダウンロードには長い時間がかかるため、ダウンロードはコードの残りの部分を一時停止することはありません。非同期なので、残りのコードが実行されている間はバックグラウンドでダウンロードが続けられます。 nextFuncを呼び出すまでに、まだJSONはまだダウンロードされていません。

画像をクリックするまでにJSONのダウンロードが完了し、機能が動作します。

PreloadとnextFuncを1つずつ呼び出す代わりに、コールバックを使用する必要があります。コールバックは、JSONのダウンロードが完了した後に呼び出される関数です。実際には、successというコールバックが既にあります。

success: function(data){ 
         var names = data 
       $('#result_div_id').html(data); 
          var json2 = $.parseJSON(data); 
        EntriesCount =json2.length; 
       $.each(json2, function() { 
       $.each(this, function(k, v){ 


    switch(k) { 
    case 'Name': 
     valueToPush.Name = v;  
     break; 

    // and more parametrs - it doesnt matter. 
    } 
    }); 

    name2.push({ID_Clients: valueToPush.id, Name: valueToPush.Name, Phone: valueToPush.Phone, Email: valueToPush.Email, Status: valueToPush.Status, Birthday: valueToPush.Birthday, ClientFrom: valueToPush.ClientFrom, User: valueToPush.User}); 

    }); 

あなたはNAME2はnextFuncが呼び出された時点で存在することを確認することができますので、直接あなたのコールバックでname2.pushを言う行の後nextFuncを呼び出して、問題を解決するために。

また、プッシュ機能を使用しているため、JSONを複数回ダウンロードすると、配列の初期長さの2倍になることに注意してください。あらかじめクリアすることができます。

ほとんどの場合、同じ機能が一見無意味に異なる動作をすると、それはまだロードされていないものが原因です。このシナリオでの最初の疑いです。