Question

我知道这可能是一个愚蠢的问题而且我知道js范围问题在SO上非常普遍，但是你可能还是很友善地帮助我解决这个问题。

这是我的功能：

function checkOpen(storeData) {
if (storeData.menu === 'true') {

    var offerImgPath = '/wcsstore/ConsumerDirectStorefrontAssetStore/images/colors/color'+ Brand.styleColour + '/v3/',
        offer1,
        offer2;

    cafeTabContent = '<p>Cafe/Restaurant facilities are available in this store.</p>';
    cafeTabContent += '<p class="menu_link"><a href="/store_menus/menu.pdf" target="_blank">Click here to download a menu</a></p>';

    if (Brand.storeLocatorSettings.cafeOffersOn === true) {

        $.ajax({
            url : Arcadia.Brand.storeLocatorSettings.offersPageURL,
            success : function(data) {
                var offerContainer = $(data).find('#basic_story_content');
                offer1 = offerContainer.children(':first-child').attr('src');
                offer2 = offerContainer.children(':last-child').attr('src');
            }
        });

        console.log(offer1);

        cafeTabContent += '<p>Current offers:</p>';
        cafeTabContent += '<p class="offer_graphic"><img src="' + offer1+ '" alt="Offer 1" /></p>';
        cafeTabContent += '<p class="offer_graphic"><img src="' + offer2+ '" alt="Offer 2" /></p>';
    }

    return cafeTabContent;
} else {
    return false;
}
};

我遇到的问题是尽管提供1＆amp; offer2在ajax成功函数之外定义，此函数中应用的值不在外部维护，因此console.log（offer1）返回undefined而不是图像路径。我知道这是一个范围问题，它真的让我烦恼。任何帮助将不胜感激。

Answer 1

在Ajax A中表示异步因此，在返回实际数据之前执行控制台语句。这意味着在成功返回值分配给offer1和offer2之后，您已在此之前将其打印在控制台上试试这个

  $.ajax({
            url : Arcadia.Brand.storeLocatorSettings.offersPageURL,
            success : function(data) {
                var offerContainer = $(data).find('#basic_story_content');
                offer1 = offerContainer.children(':first-child').attr('src');
                offer2 = offerContainer.children(':last-child').attr('src');
        console.log(offer1);
        console.log(offer2);
            }
        });

Answer 2

你正在处理一个不同的（虽然含糊不清）问题：AJAX的异步性质。

当您的代码调用$.ajax()时，该请求将异步执行，并且代码会在发送请求时立即返回。因此，offer1和offer2仍未定义。

正确的做法是将依赖于AJAX结果的任何代码放入success回调函数（或从所述回调中调用的函数）。

Answer 3

这不是范围问题。问题是，当ajax请求完成并且调用回调（设置offer1和offer2）时，console.log(...)内容已经很久了。

通过在回调中添加另一个console.log('ajax complete');来尝试它，并注意它最后被调用。

你可以通过简单地将函数的其余部分放在回调函数中来修复它。

ajax函数内的Javascript变量范围

3 个答案: