Как вернуться после загрузки изображения

Question

Прежде всего, я должен признаться, что здесь есть несколько десятков подобных вопросов в stackoverflow (this, this и множествах других), но все они прекрасно решены с помощью функцию обратного вызова, или просто положить код внутри этого image.onload события:

image.onload = function() { 
    //do other stuff that should be done right after image is loaded 
} 

Но это не мой случай. Это подпись моей функции, которая отвечает за загрузку изображений:

function patternBuilder (index) { 
    var pattern, image, ... 
    ... 
    image = new Image(); 
    image.id = "_" + index + "_"; 
    image.src = "images/_" + index + "_.png"; 
    image.onload = function() { 
     pattern = ctx.createPattern(image, "repeat"); 
    } 
    return pattern; // !!!! may return undefined if image is not yet loaded 
} 

Итак, мне нужно вернуться! Я должен это сделать, и у меня нет другого шанса. Причина, почему я должен следовать этой подписи является то, что эта модель используется какой-либо внешняя библиотечной функцией, которая выглядит так:

style: function (feature) { 
    var pattern = patternBuilder(feature.get("index")); 
    var style = new ol.style.Style({ 
     fill: new ol.style.Fill({ 
      color: pattern 
     }) 
    }); 
    return style; 
} 

Таким образом, даже если я могу изменить логику моей patternBuilder функции, я до сих пор не могу изменить функция внешней библиотеки. Эта внешняя функция использует patternBuilder и возвращает сама переменная стиля. Таким образом, нет места для обратных вызовов.

Answer 1

Вот как это может работать с обещаниями

простой обертку, чтобы вернуть изображение обещания:

//takes an url and returns a promise of a (loaded) Image. 
function getImage(url){ 
    return new Promise(function(){ 
     var image = new Image(); 
     image.onload = function(){ resolve(image); }; 
     image.onerror = reject; //TODO: resolve that to sth. better 
     image.src = url; 
    }); 
} 

и ваш patternBuilder

function patternBuilder (index) { 
    //returns now a pattern-promise 
    return getImage("images/_" + index + "_.png").then(function(image){ 
     //image.id = "_" + index + "_"; //what exactly is this ID for? 
     return ctx.createPattern(image, "repeat"); 
    }); 
} 

//you may want to add some caching 
var patternCache = Object.create(null); 
function patternBuilder(index) { 
    if(!patternCache[index]){ 
     patternCache[index] = getImage("images/_" + index + "_.png").then(image => ctx.createPattern(image, "repeat")); 
    } 
    //still returns pattern-promise, but some may have been resolved a "long time" ago. 
    return patternCache[index]; 
} 

и функции вы используете шаблон:

style: function(feature) { 
    //returns a style-promise 
    return patternBuilder(feature.get("index")).then(function(pattern){ 
     return new ol.style.Style({ 
      fill: new ol.style.Fill({ 
       color: pattern 
      }) 
     }) 
    }) 
} 

Answer 2

Вы пробовали использовать обещание? Вы можете контролировать обратный вызов, поэтому, когда изображение загружено, вы можете вернуть функцию.