Вход

Просмотр полной версии : Перевести запрос в асинхронный и вернуть массив

oleg901
10.02.2019, 06:23
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Web Audio Player Demo | Easy-Code.ru</title>
<link rel="stylesheet" href="css/normalize.css"/>
<link type="text/css" href="css/style.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Cormorant+Infant" rel="stylesheet"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css"/>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>


<style type="text/css">
#datepicker, #datepicker1{



}
#bl1 div{
float: left;
margin-left: 5%;


}
#bl1{
border: 0px solid red;
width: 80%;
height: 40%;
position: absolute;
right: 0px;


}

#test{
margin-top: 19%;
}

</style>
</head>
<body>
<div style="width: 100%; text-align: center; font-family: 'Cormorant Infant', serif;"><h1>Курсы доллара за период <span class="txt">10.07.2018</span> - <span class="txt1">23.07.2018</span> (НБУ)</h1></div>
<div id="bl1">
<div>
<p><input type="text" id="datepicker"/></p>
</div>
<div>
<p><input type="text" id="datepicker1"/></p>
</div>
<div><button id="test">Расчитать</div>
</div>
<div id="myChart" style="margin-top: 118px; width: 50%; height: 50%;"></div>

<script type="text/javascript">
$(function(){





$( "#datepicker" ).datepicker({
altFormat: "mm.yy.dd",
dateFormat: "yy.mm.dd",
monthNames: ['Январь','Февраль','Март','Апр ель','Май','Июнь','Июль','Авгус т','Сентябрь','Октябрь','Нояб ь','Декабрь'],
dayNamesMin: [ "Пн", "Вт", "Ср", "Чт", "Пт", "Сб", "Вс" ],
onSelect: function(dateText, inst) {
$(".txt").text(dateText);}

});


$( "#datepicker1" ).datepicker({
altFormat: "mm.yy.dd",
dateFormat: "yy.mm.dd",
monthNames: ['Январь','Февраль','Март','Апр ель','Май','Июнь','Июль','Авгус т','Сентябрь','Октябрь','Нояб ь','Декабрь'],
dayNamesMin: [ "Пн", "Вт", "Ср", "Чт", "Пт", "Сб", "Вс" ],
onSelect: function(dateText, inst) {
$(".txt1").text(dateText);}
})


console.log($( "#datepicker" )[0].value )

$('#test').click(function(){


var yeaR = $( "#datepicker" )[0].value[0] + $( "#datepicker" )[0].value[1] + $( "#datepicker" )[0].value[2] + $( "#datepicker" )[0].value[3],
MonS = $( "#datepicker" )[0].value[5] + $( "#datepicker" )[0].value[6],
DaY = $( "#datepicker" )[0].value[8] + $( "#datepicker" )[0].value[9];


var yeaR_fin = $( "#datepicker1" )[0].value[0] + $( "#datepicker1" )[0].value[1] + $( "#datepicker1" )[0].value[2] + $( "#datepicker1" )[0].value[3],
MonS_fin = $( "#datepicker1" )[0].value[5] + $( "#datepicker1" )[0].value[6],
daY_fin = $( "#datepicker1" )[0].value[8] + $( "#datepicker1" )[0].value[9];


function plusD(){
var data_plus = new Date(1000 * 60 * 60 * 24),
us_Mill = data_plus.getTime();
return us_Mill;

}


function finish(){
var data_plus = new Date(yeaR_fin, MonS_fin - 1, daY_fin),
us_Mill = data_plus.getTime();
return us_Mill;

}

function start(){
var data_plus = new Date(yeaR, MonS - 1, DaY),
us_Mill = data_plus.getTime();
return us_Mill;

}

var sTarrT = start();
var fin = finish();
var plus = plusD();

function diff(){
var rest = fin - sTarrT
return Math.floor(rest / (1000 * 60 * 60 * 24));

}

var difF = diff();



function proth(){
var mas = [];

for(var i = 0; i <= difF; i++){
var dataChikl = new Date(sTarrT),
ChiklY = dataChikl.getFullYear(),
ChiklM = dataChikl.getMonth()+1,
ChiklD = dataChikl.getDate();

if(ChiklM < 10 && ChiklD < 10){
ChiklD = '0'+ ChiklD;
ChiklM = '0'+ ChiklM;
}
else if(ChiklM < 10){
ChiklM = '0'+ ChiklM;
}
else if(ChiklD < 10){
ChiklD = '0'+ ChiklD;
}


var y;
$.ajax({
async:false,
url : `https://bank.gov.ua/NBUStatService/v1/statdirectory/exchange?date=${ChiklY}${ChiklM}${ChiklD}&json`,
success : function(data){
y = data[27].rate;
}})


mas.push(y);
sTarrT = sTarrT + plus;

}

return mas;


}




Highcharts.chart('myChart', {
subtitle: {
text: 'Cтатистика курса'
},

xAxis: {
categories: [ 'Январь','Февраль','Март','Апр ель','Май','Июнь','Июль','Авгус т','Сентябрь','Ноябрь','Декаб ь']
},

yAxis: {
title: {
text: 'Курс гривна/доллар'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},



series: [{
name: '1$',
data: proth()
}],

responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}

});

})

})


</script>
</body>
</html>


Доброго времени суток нужно ускорить аякс запрос. Знаю что нужно сделать запрос асинхронным, но вопрос в том что как мне при асинхронном запросе вернуть из функции "proth" вернуть "mas" Дело в том что если я делаю запрос асинхронным то в mas возвращает "undefined" Знаю что-то про колбеки через таймеры и промисы но для меня это дримучий лес помогите! За ранее спасибо :) :help:
Malleys
10.02.2019, 08:07
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Web Audio Player Demo | Easy-Code.ru</title>
<link rel="stylesheet" href="css/normalize.css" />
<link type="text/css" href="css/style.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Cormorant+Infant" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<style>
#datepicker,
#datepicker1 {}

#bl1 div {
float: left;
margin-left: 5%;
}

#bl1 {
border: 0px solid red;
width: 80%;
height: 40%;
position: absolute;
right: 0px;
}

#test {
margin-top: 19%;
}
</style>
</head>

<body>
<div style="width: 100%; text-align: center; font-family: 'Cormorant Infant', serif;">
<h1>Курсы доллара за период <span class="txt">10.07.2018</span> - <span class="txt1">23.07.2018</span> (НБУ)</h1>
</div>
<div id="bl1">
<div>
<p><input type="text" id="datepicker" /></p>
</div>
<div>
<p><input type="text" id="datepicker1" /></p>
</div>
<div><button id="test">Расчитать</button></div>
</div>
<div id="myChart" style="margin-top: 118px; width: 50%; height: 50%;"></div>

<script>

Highcharts.setOptions({
lang: {
months: [
'Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь',
'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'
],
shortMonths: [
"янв", "фев", "март", "апр", "май", "июнь",
"июль", "авг", "сент", "окт", "ноя", "дек"
]
}
});

$(function() {
$("#datepicker").datepicker({
altFormat: "dd.mm.yy",
dateFormat: "dd.mm.yy",
monthNames: ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'],
dayNamesMin: ["Пн", "Вт", "Ср", "Чт", "Пт", "Сб", "Вс"],
onSelect: function(dateText, inst) {
$(".txt").text(dateText);
}

});

$("#datepicker1").datepicker({
altFormat: "dd.mm.yy",
dateFormat: "dd.mm.yy",
monthNames: ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'],
dayNamesMin: ["Пн", "Вт", "Ср", "Чт", "Пт", "Сб", "Вс"],
onSelect: function(dateText, inst) {
$(".txt1").text(dateText);
}
});

$('#test').click(async function() {
var dp = $("#datepicker").val();
var [DaY, MonS, yeaR] = dp.split(".");

var dp1 = $("#datepicker1").val();
var [daY_fin, MonS_fin, yeaR_fin] = dp1.split(".");

function plusD() {
return 1000 * 60 * 60 * 24;
}

function finish() {
var data_plus = new Date(yeaR_fin, MonS_fin - 1, daY_fin);
return data_plus.getTime();
}

function start() {
var data_plus = new Date(yeaR, MonS - 1, DaY);
return data_plus.getTime();
}

var sTarrT = start();
var fin = finish();
var plus = plusD();

function diff() {
var rest = fin - sTarrT
return Math.floor(rest / (1000 * 60 * 60 * 24));
}

var difF = diff();

async function proth() {
var mas = [];

for (var i = 0; i <= difF; i++) {
var dataChikl = new Date(sTarrT),
ChiklY = dataChikl.getFullYear(),
ChiklM = dataChikl.getMonth() + 1,
ChiklD = dataChikl.getDate();

if (ChiklM < 10 && ChiklD < 10) {
ChiklD = '0' + ChiklD;
ChiklM = '0' + ChiklM;
} else if (ChiklM < 10) {
ChiklM = '0' + ChiklM;
} else if (ChiklD < 10) {
ChiklD = '0' + ChiklD;
}

var data = await $.ajax({
url: `https://bank.gov.ua/NBUStatService/v1/statdirectory/exchange?date=${ChiklY}${ChiklM}${ChiklD}&json`
});

var y = "27" in data ? data[27].rate : NaN;

mas.push([sTarrT, y]);
sTarrT += plus;
}

return mas;
}

$("#myChart").html(`<div class="loading">Загрузка…</div>`);

Highcharts.chart('myChart', {
subtitle: {
text: 'Cтатистика курса'
},

xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
month: '%e %b',
year: '%b'
}
},

yAxis: {
title: {
text: 'Курс гривна/доллар'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},

series: [{
name: '1$',
data: await proth()
}],

responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});
})
})
</script>
</body>
</html>
oleg901
11.02.2019, 13:57
Очень круто! Спасибо! Если бы вы еще немного объяснили или хотябы статью указали по этой теме было бы вообще шикарно!))
Malleys
11.02.2019, 21:38
статью указали по этой теме было бы вообще шикарно!
Вот, например, статья об асинхронной функции https://habr.com/ru/company/ruvds/blog/414373/

И вы можете в поисковой системе спрашивать всё, что хотите на эту тему, справочники, книги, видео, блоги, и пр. почти бесконечное объяснение, что же такое асинхронная функция. Попробуйте исследовать. https://www.google.us/search?q=async+await+javascript