Почему success не отдает параметры?

Question

[Millerish]

Доброе время суток!

Почему console.log( 'ans', ans ) показывает ответ, а console.log( 'r', r ) показывает пустую строку? Я же не объявляю переменную, а использую r.

function captureAndUpload() {
    var r = '';
    html2canvas($("#PAINTING-DIAGRAMMA"), {
        background:'#fff',
        onrendered: function(canvas) {
            var imgData = canvas.toDataURL('image/jpeg');
            var url = 'loadImg.php';
            $.ajax({
                type: "POST",
                url: url,
                dataType: 'text',
                data: {
                    screen : imgData
                },
                success: function(response){
                    response = "" + response
                    var ans = response.substr(12);
                    r = ans;
                    console.log( 'ans', ans )
                },
                error:function(xhr, ajaxOptions, thrownError){
                    console.log( xhr.responseText )
                }
            });
        }
    });
    console.log( 'r', r )
}

Answer 1

[Максим]

Потому что js асинхронный. И когда вызывается console.log(r), по сути, запрос аякса еще не выполнен

Comments

[Millerish]

C async: false - аналогичная ситуация. Как правильно?

[Максим]

Millerish: async:false сработает только если выводить "r" сразу после аяксового запроса. Но аякс помещен в событие onrendered, поэтому на стадии когда вызывается html2canvas(...) ничего не происходит. Ты просто сказал, что когда придет событие "rendered" нужно совершить аякс. А дальше пытаешься получить результаты этого аякса.

Из жизни. Говоришь Светке, что когда придет Васька, спроси у него почем он купил машину. И ты сразу же после того как сказал ей об этом, требуешь чтобы она сказала тебе цену.

Answer 2

[Виталий]

function captureAndUpload(){
  return new Promise((resolve,reject)=>{
    html2canvas($("#PAINTING-DIAGRAMMA"), {
        background:'#fff',
        onrendered: function(canvas) {
            var imgData = canvas.toDataURL('image/jpeg');
            var url = 'loadImg.php';
            $.ajax({
                type: "POST",
                url: url,
                dataType: 'text',
                data: {
                    screen : imgData
                },
                success: function(response){
                    response = "" + response
                    var ans = response.substr(12);
                    console.log( 'ans', ans );
                    resolve(ans);
                },
                error:function(xhr, ajaxOptions, thrownError){
                    console.log( xhr.responseText )
                    reject(xhr.responseText);
                }
            });
        }
    });
}
captureAndUpload().then(r=>{
  console.log('r',r);
}).catch(error=>{
  console.log(error);
});