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);
    });
});

这样做的另一个改进是使用.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 函数在 "each" 中提供了两个参数

$('...').each(function(index, value) {...});

只需使用第二个参数。

于 2012-04-25T16:23:43.217 回答
0

I had the same issue. @Blender gave me the initial idea so: thanks.

My solution was to use:

$.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
});

In my case if I don't do it that way, the rest of my code finishes so much quicker than the returned $.ajax call. It doesn't matter if I use a global variable.

UPDATE:

When using $.ajax, there are only 2 sockets available from the browser to run the requests. If you have many requests (over 500) this will cause the browser (I use Chrome) to hang because the requests add up but can't be handled on time. After some time you will get connection errors from the server.

The solution: Use an AJAX queue manager. I used http://plugins.jquery.com/ajaxQueue/

So now my code is slightly different (only had to replace $.ajax with 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
});

Hope this will help future generations :-)

于 2014-05-11T10:33:07.620 回答