jQuery ajax成功不改變本地變量

我想使用ajax爲了檢查圖像是否存在之前試圖加載它。我主要工作，但我設置了一個變量裏面的錯誤：和成功：標籤在AJAX，並沒有改變我的IMG變量。有沒有什麼辦法通過這些標籤來實現功能的其餘部分？jQuery ajax成功不改變本地變量

function getImage(imageNum) 
{ 
var img; 
$.ajax({ 
    url:imageLocation + imageNum + '.png', 
    type:'HEAD', 
    error: function() 
    { 
     img = 0; 
    }, 
    success: function() 
    { 
     var img = $('<img />', { 
      src: imageLocation + imageNum + '.png', 
      class: 'image', 
      id:'image' + imageNum}); 
     return img; 
    } 
}); 
console.log(img); 
return img; 
}

好，所以我寧願只使用圖片標籤，如果沒有理由使用AJAX。問題在於變量不會改變我的函數中的某些內容。這是一個例子。

function getImage(imageNum) 
{ 
    var img; 
    var success = 10; 
    var img = $('<img />', { 
     src: imageLocation + imageNum + '.png', 
     class: 'image', 
     id:'image' + imageNum, 
     success: function() { 
      success = 1 
     }, 
     error: function() { 
      success = 0; 
     } 
    }); 

    console.log(success); 
    if(success = 1) 
     return img; 
    else 
     return 0; 
} 

function loadImage(imageNum) 
{ 
    var img = getImage(imageNum); 
    if(img != 0) 
    { 
     $('#slider').imagesLoaded(function() { 
      $("#slider").append(img); 
      loadImage(imageNum + 1); 
     }); 
    } 
    else 
     return; 
}

來源

2012-07-11 Lethjakman

爲什麼不寫一些自定義的PHP可以檢查並回復你的ajax調用？ – TheZ 2012-07-11 21:56:53

這裏的問題是'$ .ajax'是異步的：立即返回事件（在服務器發送img數據並且調用'success'之前 – bokonic 2012-07-11 22:03:18

@TheZ太複雜了，只檢查一個圖像是否可用 – Lethjakman 2012-07-11 23:02:06

$ .ajax是異步的，所以你在調用完成之前調用console.log。當你的代碼是同步的時候你不能像這樣返回。

你必須改爲調用你的其他代碼中的成功（） - 例如：

$.ajax({ 
    url: '', 
    data: '', 
    success: function(data){ 
     codeThatNeedsImg(data); 
    } 
    }); 

function codeThatNeedsImg(img){ 
    console.log(img); 
}

來源

2012-07-11 21:59:04 bokonic

嗯，好吧。謝謝。如果是這樣的話，我將不得不嘗試重構一下。 – Lethjakman 2012-07-11 22:23:36

這個方法完美地工作了 – Silentbang 2013-03-22 11:40:06

如果你想要做的不是追加的<img>元素，直到圖像本身被加載然後就這樣做！創建<img src="..." />元素，但不要將其附加到DOM。它會提示瀏覽器嘗試獲取圖像文件。您可以將成功和錯誤事件偵聽器附加到將觸發各自結果的元素本身。

如果您獲得了成功事件，那麼您知道該圖像存在，並且您知道它已經預加載，因此您現在可以將其附加到DOM！如果它不存在，該調用將更快返回並且錯誤事件將在沒有更多開銷的情況下觸發。我會說這是雙贏的。

您可以通過閱讀事件回調函數中元素的src屬性來檢查它是哪個圖像。

下面是一個例子撥弄邏輯：http://jsfiddle.net/jZpNj/

來源

2012-07-11 22:09:24 TheZ

我以前用過這種方法，並試圖用它來實現一個變量，但它不會影響範圍內的任何東西，我不確定它的影響範圍，我只能打電話給一個警報。 – Lethjakman 2012-07-11 22:23:01

P.S.我編輯了你的jsFiddle來反映這一點。 http://jsfiddle.net/jZpNj/1/ – Lethjakman 2012-07-11 22:25:31

我們需要更多代碼來調試該特定問題。（ps：爲什麼不'error + = 1;'？） – TheZ 2012-07-11 22:26:02

好吧，讓我終於找到了解決我的問題。 @bokonic對於ajax來說非常正確。我一直使用ajax，所以我可以使用成功調用，而不是在等待錯誤調用更改'成功'變量並結束循環時追加圖像。它會在等待時附加約3張額外的圖像。成功永遠不會從加載圖像調用，所以我猜這只是一個Ajax事情。這就是它的樣子。

function loadImage(imageNum) 
{ 
    $('#slider').imagesLoaded(function() { 
     if(success) 
     { 
      $.ajax({ 
       url:imageLocation + imageNum + '.png', 
       type:'HEAD', 
       error: function() 
       { 
        success = false; 
       }, 
       success: function() 
       { 
        var img = $('<img />', { 
         src: imageLocation + imageNum + '.png', 
         class: 'image', 
         id:'image' + imageNum 
        }); 
        $('#slider').append(img); 
        loadImage(imageNum + 1); 
       } 
      }); 
     } 
     else 
      return; 
    }); 
}

來源

2012-07-12 17:40:11 Lethjakman

jQuery ajax成功不改變本地變量

回答

相關問題