jqueryコールバックを理解する

Question

javascriptコールバックの仕組みを理解できません。

$.post("getResults.php", { x: 100, y: 200},  
    function(arrayOfValues){ 
     alert(arrayOfValues[2])   
    }, 'json'); 

alert()が正しい値を返し、期待通りに機能している：私は、MySQLデータベースから値を取得するには、次のコードを使用しています。しかし、私はarrayData[2]からの値がどのようにして私のプログラムの他の部分に渡されたり、返されたりするのか理解していません。

私はjquery helpと多くの質問と回答を読んだことがありますが、コールバックの仕組みはわかりません。

この場合、メインプログラムでarrayOfValues [2]にアクセスできるようにします。

Answer 1

var foo; 

$.post("getResults.php", { x: 100, y: 200 }, function(data) { 
    foo = data;  
}, 'json'); 

応答データがfoo変数に格納されます。ただし、これはHTTPレスポンスが到着したときに呼び出される非同期コールバック関数であることに注意してください。 は、foo変数を使用することはできません。そのHTTP応答が到着し、コールバック関数が終了するまでは理解できません。

Answer 2

返されるデータを処理する方法は多数あります。

変数をそのインライン関数以外のスコープで設定し、値を渡します。コールバックresult = arrayData;

で

var result;

また、その結果を他のことを行うための機能を呼び出すことができます。

Answer 3

$ .post（）は、非同期（非ブロッキング）呼び出しです。つまり、関数はすぐに戻ります（サーバーの応答を待たずに）次のjavascriptコードが実行されます。サーバーからの応答が到着すると 、コールバック関数が呼び出され、応答で...

あなたはdivの中にコンテンツを表示したい、のは、言ってみましょう：

$.post('url.php', {}, function(content) { 
    $('#div_id').html(content); 
}); 

// or shorter: 
$('#div_id').load('url.php', {}); 

またはすることができますいくつかのロジックを持つオブジェクトがあり、コールバックとして、オブジェクトのメソッドを登録します。

function MyHandler(msgElement) { 
    var sum = 0; 
    this.onSuccess = function(content) { 
    sum = sum + content[0]; 
    if (sum > 100) { 
     msgElement.html('Sum has reached 100 !'); 
    } 
    }; 
    this.otherMethod = function() { 
    alert('Current sum is:' + sum); 
    }; 
} 

var handler = new MyHandler($('#my_div')); 

// do the request 
$.post('url.php', {}, handler.onSuccess, 'json'); 

// you can call any method of handler object using global variable handler 
// or passing a reference (handler object) to any other object 
// notice, if you call this method immediately after sending the request, 
// the sum var is likely to be 0, as the response has not arrived yet... 
handler.otherMethod(); 

は基本的に、あなたは多くのオプションを持っています。あなたはより多くの情報が必要、あなたが応答を行いたい正確に何を指定するのであれば...

Answer 4

コールバック、あなたが理解できる方法でそれを試してみましょう。

• まず、関数を実行せずに変数に割り当てる方法を理解する必要があります。

これは、あなたが機能を周りに渡すことができますとだけしたいときにそれらを実行し、私は変数に関数を渡すことができますどのように相続人の例と、それを実行していない：

a = function(){} 

これは小さな一例です最も一般的なのは、a()のような関数を呼び出して、()を追加すると、関数に実行を指示します。

• 今、あなたはあなたが別の関数にこれらの変数を渡すことができることを理解し、まだ

以下の例を、それらを呼び出すべきではありませんが、あなたがそれを実行しながら、上記の機能aに関数を渡す方法を示します。

b = function(){} 
b(a); 

• 次のステップは、これらの匿名関数がで割り当てられていない

別の関数に渡しながら、関数を変数に割り当てることができます無名関数を作成することができることですそれを書くのはポイントですが、外側の関数スコープ内で解析されたときに割り当てられます。

私は理解するのが少し面倒ですが、うまくいけばその例はそれをクリアします。

a(
    function(){} 
); 

上記離間aから今匿名関数であり、そして唯一の外側の機能すなわち、b内の変数に割り当てられb(a)例と同様です。

jQuer'ies APIは、jQueryコアとユーザーコードとの使い分けが簡単で、匿名関数に大きく依存しているため、jQueryのメインコードに大きく依存する必要はありませんが、コードに接続するjQuery。

機能の内部および外部にデータを渡すの同様の手段を使用する関数の例はとても似ています：

JoinUser = function(Firstname,Lastname,callback) 
{ 
    Fullname = Firstname + " " + Lastname; 
    callback(Fullname); 
} 

JoinUser("Robert","Pitt",function(Fullname) 
{ 
    alert(Fullname); //Robert Pitt 
}) 

上記の例では唯一のjQueryのスタイルが働く大体方法を示していますが、ほとんどありませんコールバックの重要な利点はAjaxです。

そのデータは、例えば、受信されるまで

アヤックスは、JavaScriptのスクリプトを停止することができます

Result = RequestPage("Contacts"); 

アヤックスは、コーディングがさらに下に予想されるため、結果を返すためにRequestPageを待たなければならこの行を見ているとき、この値が必要なので、JavaScriptが続行される前にサーバーから返されるデータを監視する必要があります。これは数秒であり、UIが異常動作する原因になります。

これを回避する方法は、コールバックを関数に送信して、アプリケーションの残りの部分を処理したいときに呼び出すように指示することです。

RequestPage("Contacts",function(){}); 

ので、今のJavaScriptは必要なタスクを実行するページの下続け、RequestPage関数内で、それはそうのようにレイアウトされます：

function RequestPage(page,callback) 
{ 
    //.. 
     request.oncomplete = callback; 
    //.. 
} 

アプリケーションの残りが完了しました。この方法を結果が出たら、UIを変更することができます。

これはローダーを使用して作業状態を複製する理由です。

jQueryがjavaScriptのこれらの要素をどのように利用するのか理解していただければ幸いです。アプリケーションの開発に役立ちます。