Как изменить переменную при выполнении onload

Я пытаюсь загрузить изображение на холст. Я хочу получить переменную при выполнении функции загрузки.

function getResponse(srcImg){

var img = new Image();
var loaded = false;
img.src = srcImg;

img.onload = function(){
  loaded = true;
  }
 // i want to get loaded variable when the onload function is complete
 // wait the return value until the img is not loaded
 return loaded;
}

getResponse(imageURL); //loaded is false

Я также пробовал следующий метод. Но у меня это не работает. Следующим методом возвращается значение undefined.

function getResponse(srcImg,cb){

var img = new Image();
var loaded = false;
img.src = srcImg;

img.onload = function(){
  loaded = true;
  cb(loaded);
  }
 // i want to get loaded variable when the onload function is complete
 // wait the return value until the img is not loaded
 return loaded;
}

getResponse(imageURL,output(load)); //output is undefined

function output(load){
console.info(load);
}
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
620
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Это асинхронное поведение. Вы можете использовать обратный вызов или обещание. Смотри ниже:

function getResponse(srcImg,callback){

    var img = new Image();
    var loaded = false;
    img.src = srcImg;

    img.onload = function(){
      loaded = true;
      callback(loaded)
      }
     // i want to get loaded variable when the onload function is complete
     // wait the return value until the img is not loaded
     return loaded;
}

getResponse(imageURL,(load)=>{});

В приведенном выше коде есть ошибка, getResponse(imageURL,output(load)); должен быть getResponse(imageURL,output);, второй параметр должен быть функцией, а не возвращением функции

sinbar 26.12.2018 09:20

используйте обратный вызов, как это

function init(){
    var srcImg = "https://cdn.shopify.com/s/files/1/1447/4928/products/large_grande.jpg"
    getSource(srcImg,(data)=>{
        //do your process here
        document.getElementById("demo").textContent = data
    });
}
    
function getSource(src,callback){
    var img = new Image();
    img.onload = function(){
	callback(src);
    }
    img.src = src;
}
<body onload = "init()">
	<p id = "demo"></p>
</body>

Другие вопросы по теме