任何辦法避免的JavaScript。那麼（）方法

Question

我在新的JavaScript，下面是我的代碼（非特定的）來解釋我的問題

cornerstone.loadImage(imageIdpro).then(function(image) {//doSomething} 

我已經知道了。那麼（函數（））是異步功能，我的問題是，有沒有什麼辦法可以修改此代碼，以避免使用.then()，並將其更改爲同步？任何幫助讚賞。

我之所以不想用。那麼（）是因爲我想滑動改變一些值，以保持當我拖動滑塊

$("#upperBound").slider({ 
    range: "max", 
    min: minPixelValue, 
    max: maxPixelValue, 
    slide: function(event, ui) { 
    $("#rangeUpper").html(ui.value); 
    currentUpperBound = ui.value;//currentUpperBound is current slide value 
    console.log("1"); 
    loadAndViewImagethresholding(imageId); 
    console.log("4"); 
    }, 
}); 

和loadAndViewImagethresholding 功能更新的結果是類似的東西：

function loadAndViewImagethresholding(imageId) { 
    var imageIdpro = "wadouri:" + "http://localhost:8888/dicomread/temp/" + loadfileName; 
    cornerstone.loadImage(imageIdpro).then(function(image) { 
    console.log("2"); 
    upper = currentUpperBound;//upperBound slide current value 
    lower = currentLowerBound;//there is another lowerBound slide current value 
    for (var i = 0; i < image.getPixelData().length; i++) { 
     if (image.getPixelData()[i] < lower || image.getPixelData()[i] > upper) { 
     image.getPixelData()[i] = image.minPixelValue; 
     } else { 
     image.getPixelData()[i] = image.maxPixelValue;//Here is the problem!!image.getPixelData()[i] is a image pixel value at [i], every time when slide current value (upper or lower value)changes, this image.getPixelData()[i] has already changed 
     } 
    } 
    //after that for loop, image.getPixelData(which is a data array) has already changed (after each time slide value update) 
    cornerstone.displayImage(elementthresh, image);//but this function seems has been skipped 
    console.log("3"); 
    }); 
} 

因爲。那麼（）是異步函數，這個代碼將執行類似（在控制檯號）：1-4-2-3而非1-2-3-4如我所料，這似乎跳過displayImage();（更新結果） 這就是我在考慮如果我可以將這個異步函數更改爲同步，它將以「正確」順序執行，並且在拖動滑動條時它將保持更新。

Answer 1

保持鏈接的承諾。這就是他們設計的工作方式。注意函數中的return語句返回未來鏈接的承諾。

$("#upperBound").slider({ 
    range: "max", 
    min: minPixelValue, 
    max: maxPixelValue, 
    slide: function(event, ui) { 
     $("#rangeUpper").html(ui.value); 
     currentUpperBound = ui.value; 
     console.log("1"); 
     loadAndViewImagethresholding(imageId).then(function() { 
      console.log("4"); 
     }); 
    }, 
}); 

function loadAndViewImagethresholding(imageId) { 
    var imageIdpro = "wadouri:" + "http://localhost:8888/dicomread/temp/" + loadfileName; 
    return cornerstone.loadImage(imageIdpro).then(function(image) { 
     console.log("2"); 
     upper = currentUpperBound; 
     lower = currentLowerBound; 
     for (var i = 0; i < image.getPixelData().length; i++) { 
      if (image.getPixelData()[i] < lower || image.getPixelData()[i] > upper) { 
       image.getPixelData()[i] = image.minPixelValue; 
      } else { 
       image.getPixelData()[i] = image.maxPixelValue; 
      } 
     } 
     cornerstone.displayImage(elementthresh, image); 
     console.log("3"); 
    }); 
} 

Answer 2

在下面的答案，因爲我不知道爲什麼currentUpperBound，currentLowerBound，上下似乎是在你的代碼全局，我試着寫代碼，「尊重」這一事實

此代碼將確保下一個開始之前，通過鏈接的承諾各的LoadImage完成後，使用var p

var p = Promise.resolve(); 
var loading = []; 

$("#upperBound").slider({ 
    range: "max", 
    min: minPixelValue, 
    max: maxPixelValue, 
    slide: function(event, ui) { 
     $("#rangeUpper").html(ui.value); 
     var upperBound = currentUpperBound = ui.value; 
     var lowerBound = currentLowerBound; 
     p = p.then(function() { 
      loadAndViewImagethresholding(imageId, upperBound, lowerBound); 
     } 
    }, 
}); 

function loadAndViewImagethresholding(imageId, upperBound, lowerBound) { 
    var imageIdpro = "wadouri:" + "http://localhost:8888/dicomread/temp/" + loadfileName; 
    return cornerstone.loadImage(imageIdpro).then(function(image) { 
     for (var i = 0; i < image.getPixelData().length; i++) { 
      lower = lowerBound; 
      upper = upperBound; 
      if (image.getPixelData()[i] < lower || image.getPixelData()[i] > upper) { 
       image.getPixelData()[i] = image.minPixelValue; 
      } else { 
       image.getPixelData()[i] = image.maxPixelValue; 
      } 
     } 
     cornerstone.displayImage(elementthresh, image); 
    }); 
} 

不過，我懷疑你想在進步，「取消」任何的LoadImage如果滑塊移動前圖像被加載。 雖然你無法取消的LoadImage功能，可以防止後續.then形式執行 - 這是一個有點繁瑣，但我想不出更好的方式把我的頭頂部

var loading = []; 

$("#upperBound").slider({ 
    range: "max", 
    min: minPixelValue, 
    max: maxPixelValue, 
    slide: function(event, ui) { 
     // stops any .then's yet to be fired 
     loading.forEach(function(x) { 
      x.ok = false; 
     }); 
     loading = []; 
     $("#rangeUpper").html(ui.value); 
     currentUpperBound = ui.value; 
     loadAndViewImagethresholding(imageId, currentUpperBound, currentLowerBound); 
    }, 
}); 

function loadAndViewImagethresholding(imageId, upperBound, lowerBound) { 
    var imageIdpro = "wadouri:" + "http://localhost:8888/dicomread/temp/" + loadfileName; 
    var x = { ok: true; } 
    cornerstone.loadImage(imageIdpro).then(function(image) { 
     if (x.ok) { 
      lower = lowerBound; 
      upper = upperBound; 
      for (var i = 0; i < image.getPixelData().length; i++) { 
       if (image.getPixelData()[i] < lower || image.getPixelData()[i] > upper) { 
        image.getPixelData()[i] = image.minPixelValue; 
       } else { 
        image.getPixelData()[i] = image.maxPixelValue; 
       } 
      } 
      cornerstone.displayImage(elementthresh, image); 
     } 
    }); 
    loading.push(x); 
}