任何避免javascript .then（）方法的方法

Question

I am new in javascript, following is my code( not specific) to explain my question

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

I already know that .then(function()) is asynchronous function, my question is, is there any way that I can modify this code to avoid to use .then() , and change this to synchronous? Any help appreciated.

The reason I do not want to use .then() is because I want to slide to change some value to keep update the result when I drag slide

$("#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");
  },
});

and loadAndViewImagethresholding function is something like that:

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");
  });
}

and because .then() is asynchronous function, this code will implement( number in console) like: 1-4-2-3 rather than 1-2-3-4 as I expect which seems skip displayImage(); (update result) So that is way I am thinking if I can change this asynchronous function to synchronous, it will implement in 'right' order, and it will keep updating when I drag the slide bar.

Answer 1

Keep chaining the promises. That's how they're designed to work. Note the return statement in the function to return the promise for future chaining.

$("#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

In the answers below, as I am not sure why currentUpperBound, currentLowerBound, upper and lower seem to be globals in your code, I've tried to write code that "respects" that fact

This code will make sure that each loadImage completes before the next one is started, by chaining the promises, using 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);
    });
}

However, I suspect that you want to "cancel" any loadImage in progress if the slider moves before the image is loaded. While you can't cancel the loadImage function, you can prevent the subsequent .then form executing - it's a bit fiddly, but I can't think of a better way off the top of my head

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);
}