Javascript功能不能執行，直到循環後

Question

我試圖循環通過包含產品數字（價格，數量等）的產品數字的數組。產品編號用於生成以不同功能調用的圖像。當我調用該函數並將循環變量傳遞給它時，直到循環完成纔會發生任何事情。然後生成所有產品圖像，但它們是相同的。我很茫然。

for (var g = 0, len = oldDetails.length; g <= len - 1; g++) { 
    loaditem (oldDetails[g]['product_number'],g); 
} 
function loaditem (itemnumber, itemlocation) { 
    document.getElementById('divid' + itemlocation).innerHTML = '<img src = "' + itemnumber + '.jpg" />'; 
} 

任何幫助將不勝感激。

編輯我張貼的完整代碼參考

 //alert (JSON.stringify(oldDetails)); 
    setTimeout(function() { 
     for (var g = 0, len = oldDetails.length; g <= len - 1; g++) { 
     count = 'somestring' + g; 
     loaditem(oldDetails[g]['product_number'], count); 
     if (g < len - 1) { 
      duplicate(); 
     } 
     } 
    }, 1000); 

    function loaditem(newItemNumber, count) { 
     itemNumber = newItemNumber.toUpperCase(); 
     //ARMS Handler 
     switch (itemNumber.substring(0, 1)) { 
     case 'A': 
      lookupNumber = itemNumber.replace(itemNumber.substring(2, 3), '0'); 
      break; 
     case 'R': 
      lookupNumber = itemNumber.replace(itemNumber.substring(2, 3), '0'); 
      break; 
     case 'M': 
      lookupNumber = itemNumber.replace(itemNumber.substring(2, 3), '0'); 
      break; 
     case 'N': 
      lookupNumber = itemNumber.replace(itemNumber.substring(2, 3), '0'); 
      break; 
     default: 
      lookupNumber = itemNumber; 
     } 
     //dash handler 
     if (itemNumber.substring(4, 5) == '-') {} else { 
     lookupNumber = lookupNumber.replace('-', ''); 
     } 
     count = count.substr(count.length - 1, count.length); 
     orderDetails[count][0] = itemNumber; //adds product # to orderDetail array 
     imgSource = 'http://s3.amazonaws.com/images2.eprevue.net/p4dbimg/767/image480/' + lookupNumber.toLowerCase() + '_con.jpg'; 
     var imageTest = $("<img>"); 
     var imageTest_con = $("<img>"); 
     imageTest.attr('src', imgSource).load(function() { 
      document.getElementById("product-image" + count).innerHTML = '<img src="' + imgSource + '" width="100%" height="auto" />'; 
     }) 
     .error(function() { 
      imgSource = 'http://s3.amazonaws.com/images2.eprevue.net/p4dbimg/767/image480/' + lookupNumber.toLowerCase() + '.jpg'; 
      imageTest_con.attr('src', imgSource).load(function() { 
       document.getElementById("product-image" + count).innerHTML = '<img src="' + imgSource + '" width="100%" height="auto" />'; 
      }) 
      .error(function() { 
       imgSource = 'http://hekmancontract.andrewchristmann.com/quote-sheet/images/image-missing.jpg'; 
       document.getElementById("product-image" + count).innerHTML = '<img src="' + imgSource + '" width="100%" height="auto" />'; 
      }); 
     }); 

     document.getElementById('pnum' + count).innerHTML = " " + itemNumber.toUpperCase(); 
    } 

Answer 1

現在，您發佈的完整代碼的問題，可以在 被精確定位到您在loaditem方法使用全局變量。

如果您將它們轉換爲本地（，因爲它們每次迭代都會發生變化），它應該可以工作。

像這樣的事情

function loaditem(newItemNumber, count) { 
    var itemNumber = newItemNumber.toUpperCase(), 
     lookupNumber; 
    //ARMS Handler 
    switch (itemNumber.substring(0, 1)) { 
    case 'A': 
     lookupNumber = itemNumber.replace(itemNumber.substring(2, 3), '0'); 
     break; 
    case 'R': 
     lookupNumber = itemNumber.replace(itemNumber.substring(2, 3), '0'); 
     break; 
    case 'M': 
     lookupNumber = itemNumber.replace(itemNumber.substring(2, 3), '0'); 
     break; 
    case 'N': 
     lookupNumber = itemNumber.replace(itemNumber.substring(2, 3), '0'); 
     break; 
    default: 
     lookupNumber = itemNumber; 
    } 
    //dash handler 
    if (itemNumber.substring(4, 5) == '-') {} else { 
    lookupNumber = lookupNumber.replace('-', ''); 
    } 
    count = count.substr(count.length - 1, count.length); 
    orderDetails[count][0] = itemNumber; //adds product # to orderDetail array 
    var imgSource = 'http://s3.amazonaws.com/images2.eprevue.net/p4dbimg/767/image480/' + lookupNumber.toLowerCase() + '_con.jpg'; 
    var imageTest = $("<img>"); 
    var imageTest_con = $("<img>"); 
    imageTest.attr('src', imgSource).load(function() { 
     document.getElementById("product-image" + count).innerHTML = '<img src="' + imgSource + '" width="100%" height="auto" />'; 
    }) 
    .error(function() { 
     imgSource = 'http://s3.amazonaws.com/images2.eprevue.net/p4dbimg/767/image480/' + lookupNumber.toLowerCase() + '.jpg'; 
     imageTest_con.attr('src', imgSource).load(function() { 
      document.getElementById("product-image" + count).innerHTML = '<img src="' + imgSource + '" width="100%" height="auto" />'; 
     }) 
     .error(function() { 
      imgSource = 'http://hekmancontract.andrewchristmann.com/quote-sheet/images/image-missing.jpg'; 
      document.getElementById("product-image" + count).innerHTML = '<img src="' + imgSource + '" width="100%" height="auto" />'; 
     }); 
    }); 

    document.getElementById('pnum' + count).innerHTML = " " + itemNumber.toUpperCase(); 
} 

---

所以，問題是，你聲明一些全局變量，並在同一時間，你都設置所使用的一些異步回調（的load和error事件）變量。

全局變量將被改變爲調用loadItem循環的每個迭代，而這些全局變量的實際值將被用於當圖像加載（異步）。因此，直到圖像加載完畢，imgSource變量纔會更改其值，然後纔會用於實際的DOM img插入。