Question

我是javascript的新手，以下是我的代码（不具体）来解释我的问题

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

我已经知道.then（function（））是异步函数，我的问题是，有什么方法可以修改这段代码以避免使用.then()，并将其更改为同步？任何帮助赞赏。

我不想使用.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");
  });
}

并且因为.then（）是异步函数，这段代码将实现（控制台中的数字），如：1-4-2-3而不是1-2-3-4，因为我期望它似乎跳过{{1} }（更新结果）所以这就是我想如果我可以将这个异步函数改为同步，它将以'正确'的顺序实现，并且当我拖动滑动条时它会不断更新。

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，upper和lower似乎是代码中的全局变量，我试图编写“尊重”这个事实的代码

此代码将确保每个loadImage在下一个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);
}

任何方法都可以避免使用javascript .then（）方法

2 个答案: