4

私はフランス語でRedditのようなウェブサイトをやっていて、完全に最適化するために、結果をフェッチしてキャッシュし、jQueryを介して各リンクにクエリを実行して、それらが反対票/賛成票であるかどうかを確認しています。

  1. クエリを最適化するためにそれについてどう思いますか？

  2. なぜうまくいかないのですか！これが私のコードです。

HTML：

    <div class="box ajax_div" title="3">
        <div class="score">
            <a href="#" class="upvote_position" title="post-up-3"><img src="images/up.png" /></a>
            <div class="score_position">1</div>
            <a href="#" class="downvote_position" title="post-down-3"><img src="images/down.png" /></a>
    </div>

    <div class="box_info">
        <div class="link">
            <a href="#" class="text-show"><a href="?show=3" rel="nofollow" class="out">ouioui</a> 
        </div>
        <div class="further">
            <span class="date" title="2012-04-25 04:57:05">il y a 13 heures</span> | posté par <a href="?user=david">david</a> dans <a href="?chan=100hp.fr">100hp.fr</a>
        </div>
        <div class="further_more">
            <a href="?show=3"><img src="images/comment.png" />2 commentaires</a> <a href="#" class="save" title="3"><img src="images/save.png" />sauvegarder le lien</a> <a href="#" class="spam" title="3"><img src="images/report.png" />spam?</a>
        </div>
    </div>
    <div class="textbox" style="display:none;">razraz</div>
    </div>

JavaScript：

    $(".box").each(function(index){
        ele = $('.box').eq(index);
        $.get("ajax/score.php",
        { idbox: ele.attr('title'), type: "post" },
        function(data) {
            ele.find(".score_position").html(data);
        });
    });

私はそのような複数のボックスを持っています、そしてそれはそれらの最後のものだけに影響します。私は最初にインデックスとeq（index）なしで試しましたが、同じことをします。

4

4 に答える 4

6

eleグローバル変数をオーバーライドし、次を追加してみてくださいvar：

$(".box").each(function(index){
    var ele = $('.box').eq(index);
    $.get("ajax/score.php",
    { idbox: ele.attr('title'), type: "post" },
    function(data) {
        ele.find(".score_position").html(data);
    });
});

これを行う際のもう1つの改善点は、のコールバック.each()が実行されているコンテキストを使用することです。これにより、セレクターを再度評価する必要がなく、オブジェクト内にDOM要素（this）を含めるだけで、スクリプトが少し高速化されます。jQuery

$(".box").each(function(index){
    var ele = $(this);
    $.get("ajax/score.php",
    { idbox: ele.attr('title'), type: "post" },
    function(data) {
        ele.find(".score_position").html(data);
    });
});
于 2012-04-25T16:19:47.197 に答える
2

リクエストは非同期です。.getつまり、一度呼び出されるとコードの実行がブロックされません。

事実上、コールバックが最終的に呼び出されeleたときと思われる要素ではありません.get（おそらくの最後の要素になります.box）。

これを克服するには、ループの反復ごとに変更される変数なしで要素をターゲットにするようにしてください。

于 2012-04-25T16:24:36.170 に答える
1

jqueryの各関数は「each」に2つの引数を提供します

$（'...'）。each（function（index、value）{...}）;

2番目の引数を使用するだけです。

于 2012-04-25T16:23:43.217 に答える
0

私も同じ問題を抱えていました。@Blenderは私に最初のアイデアをくれたので：ありがとう。

私の解決策は以下を使用することでした：

$.ajax({
url: "myExample.html",
context: this //"this" refer to the outer-context "this" & not the internal $ajax "this"
}).done(function() {
//do all the stuff you need to do, it will then be executed in the right order
});

私の場合、そのようにしないと、残りのコードは、返された$.ajax呼び出しよりもはるかに速く終了します。グローバル変数を使用するかどうかは関係ありません。

アップデート：

$ .ajaxを使用する場合、リクエストを実行するためにブラウザから使用できるソケットは2つだけです。リクエストが多い場合（500を超える場合）、リクエストが合計されても時間どおりに処理できないため、ブラウザ（Chromeを使用）がハングします。しばらくすると、サーバーから接続エラーが発生します。

解決策：AJAXキューマネージャーを使用します。http://plugins.jquery.com/ajaxQueue/を使用しました

したがって、私のコードは少し異なります（$ .ajaxをjQuery.ajaxQueueに置き換えるだけで済みます）：

jQuery.ajaxQueue({
url: "myExample.html",
context: this //"this" refer to the outer-context "this" & not the internal $ajax "this"
}).done(function() {
//do all the stuff you need to do, it will then be executed in the right order
});

これが将来の世代に役立つことを願っています:-)

于 2014-05-11T10:33:07.620 に答える