Question

我正在制作一个小广告剧本。

通过插入以下脚本在页面上插入广告：

<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>

这应该在页面上插入3个广告。由于adID已设置，因此不应选择随机广告，而应选择特定广告。

现在这是我的剧本：

/*! 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();
        }
    });

});

});

现在，我希望打开三个脚本的页面，按顺序给出三个警告框。 1,2,3。但是，它完全是随机的，因为它取决于来自我的ajax调用的服务器响应的速度。

结果是，广告按随机顺序排列，而不是1,2,3。

我的第一个想法是使用.gd-ad-script：首先作为选择器，这样每个脚本只会处理一个广告，但后来我意识到这需要我以某种方式延迟所有内容，直到第一个广告脚本被删除，这是不受欢迎的......

有什么好建议吗？

Answer 1

我认为订单错误是因为你的脚本没有做你认为它正在做的事情。

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

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

除非我遗漏了某些东西（可能是因为你使用count变量做了什么似乎很混乱），所有三次你的脚本运行时，它都会循环遍历所有三个<script>元素引导他们处理相同的第一个<script>元素，因为没有任何内容可以让他们识别已经处理过的<script>元素。

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

确保您的脚本只下载一次。
运行三次，每次都处理自己的广告，而不是循环遍历所有或一次循环播放所有广告。
确保在正确的元素后附加广告。这样，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>

with（未经测试）：

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

防止多个$ .ready（）函数立即触发？

1 个答案: