Вот мой код. Я хочу вернуть значение front_image
но возвращает его пустую строку.
function get_front_image(callbackFunction){
var front_image="";
html2canvas($('#selector'), {
onrendered: function(canvas) {
front_image=canvas.toDataURL();
callbackFunction(front_image);
}
});
}
im пытается получить значение front_image
как это
var f;
var a=get_front_image(function(value){
f= value;
});
alert(f);// it returns blank
как я могу получить это значение из этой функции, пожалуйста, предложите мне ответ. заранее спасибо
В вашей функции get_front_image
вы назначаете пустую строку переменной front_image
, тогда вы вызываете функцию html2canvas
, которая имеет функцию onrendered
. Эта функция называется асинхронным, так что к тому времени, когда вы возвращенная front_image
переменную, то onrendered
функция пока не называется, что означает front_image
еще пустая строка.
В основном при выполнении асинхронных действий вы будете работать с функциями обратного вызова. Здесь это может выглядеть примерно так:
function get_front_image(callbackFunction){
var front_image="";
html2canvas($('#selector'), {
onrendered: function(canvas) {
front_image=canvas.toDataURL();
callbackFunction(front_image);
}
});
}
var f;
get_front_image(function(value){
f = value;
alert(f); //will return your value
});
alert(f); //Wont alert your value
Чтобы было понятно, в каком порядке выполнено:
var f;
get_fron_image
и вызывается функция html2canvas. Это асинхронно, поэтому функция onrendered
будет вызываться только после ее завершения, и мы не можем знать, когда это произойдет.alert(f);//wont alert your value
alert(f);//wont alert your value
строка alert(f);//wont alert your value
выполнена. Поскольку функция onrendered
еще не была вызвана, f
еще не имеет значения.onrendered
выполняется, и onrendered
функция callbackFunction
, где alert(f);
показывает ваше значение, как ожидалось. Что бы вы ни делали с вашей переменной f
должно произойти в функции callbackFunction, чтобы работать.html2canvas onrendered будет запускаться асинхронно, а затем ваша функция возвращает пустой var, который не был инициализирован.
Таким образом, мы должны использовать функции обратного вызова для длительных задач. Вы можете реализовать свои функции, как показано ниже.
function get_front_image(callback){
html2canvas($('#selector'), {
onrendered: function(canvas) {
var url = canvas.toDataURL();
callback(url);
}
});
}
И вызовите функцию, как показано ниже.
get_front_image(function(link){
alert(link);
});
var link= get_front_image(function(link){ }); alert(link)
get_front_image(function(value){ f = value; alert(f);// it alerts here }); alert (f);// but not here :(