0

I'm working on making a small advertisement script.

An ad is inserted on a page, by inserting the following script:

<script class="gd-ad-script" src="http://domain.dk/ads/gdAds.js?adID=1&x=auto&y=auto&loadAd=?"></script>
<script class="gd-ad-script" src="http://domain.dk/ads/gdAds.js?adID=2&x=auto&y=auto&loadAd=?"></script>
<script class="gd-ad-script" src="http://domain.dk/ads/gdAds.js?adID=3&x=auto&y=auto&loadAd=?"></script>

This should insert 3 ads on the page. Since the adID is set, it should not select a random ad, but a specific ad.

Now here is my script:

/*! jQuery v1.8.3 jquery.com | jquery.org/license */
// * jQuery libary here * //


$(document).ready(function(){
var count = 0;

var JSONurl = 'http://domain.dk/ads/loadAd.php?callback=?';

$('.gd-ad-script').each(function(){

    var adSrc = $(this).attr('src');

    var adID = adSrc.substring(adSrc.indexOf('?adID=') + 6, adSrc.indexOf('&x='));
    var x = adSrc.substring(adSrc.indexOf('&x=') + 3, adSrc.indexOf('&y='));
    var y = adSrc.substring(adSrc.indexOf('&y=') + 3, adSrc.indexOf('&loadAd=?'));

    var JSONdata = 'domain=' + window.location.hostname + '&adID=' + adID + '&xres=' + x + '&yres=' + y;

    $(this).attr('id', 'add-current-ad' + adID);

    $.getJSON(JSONurl, JSONdata, function(serverResponse) {
        ++count;
        if (count == 1) {
            alert(adID); // Comment this line out, unless testing
            $('head').prepend(serverResponse.cssReset);
            $(serverResponse.adContent).insertAfter('#add-current-ad' + adID);
            $('#add-current-ad' + adID).remove();
        }
    });

});

});

Now, I would expect the page with the three scripts on, giving med three alert boxes in sequential order. 1, 2, 3. However, it is completely random because it all depends on how fast the server response from my ajax call is.

The results is, that the ads are placed in random order instead of 1, 2, 3.

My first thought was to use .gd-ad-script:first as selector, so that each script would process only one ad but then I realized that it would require me to somehow delay everything until the first ad script is removed, which is undesirable...

Any good advices?

4

1 回答 1

0

我相信顺序错误是因为您的脚本没有按照您认为的那样做。

您将使用不同的 GET 参数包含您的脚本三次。

（注意：这会导致浏览器从服务器下载脚本三次，这是不必要的，因为每次都是同一个脚本。）

除非我遗漏了一些东西（可能是因为你对count变量所做的事情看起来很混乱），否则脚本运行的所有三个时间都会循环所有三个 <script>元素，导致它们都处理相同的第一个<script>元素，因为有没有任何东西可以让他们识别<script>已经处理过的元素。

恕我直言，您应该重新考虑您的整个概念：

  • 确保您的脚本只下载一次。
  • 要么运行 3 次，每次处理自己的广告而不循环所有广告，要么运行一次循环所有广告。
  • 确保在正确的元素之后附加您的广告。这样，AJAX 请求返回的顺序就无关紧要了。

就个人而言，我不会将脚本包含三次，而只会包含一次，并用其他元素标记广告的位置。像这样的东西：

<script src="http://domain.dk/ads/gdAds.js"></script>
<div data-ad-id="1" data-ad-x="auto" data-ad-y="auto"></div>
<div data-ad-id="2" data-ad-x="auto" data-ad-y="auto"></div>
<div data-ad-id="3" data-ad-x="auto" data-ad-y="auto"></div>

与（未经测试）：

$(document).ready(function(){
    var JSONurl = 'http://domain.dk/ads/loadAd.php?callback=?';


    $('[data-ad-id]').each(function(){

        var ad = $(this);
        var adID = ad.data('ad-id');
        var x = ad.data('ad-x');
        var y = ad.data('ad-y');

        var JSONdata = 'domain=' + window.location.hostname + '&adID=' + adID + '&xres=' + x + '&yres=' + y;

        $.getJSON(JSONurl, JSONdata,
            (function(ad) {
                    function(serverResponse) {
                        $('head').prepend(serverResponse.cssReset);
                    $(serverResponse.adContent).insertAfter(ad);
                    ad.remove();
                }
            })(ad) 
        );
    });
});
于 2012-12-13T10:29:36.547 回答