Когда использовать (а) синхронные звонки? - PullRequest
Новая
       3

Когда использовать (а) синхронные звонки?

0 голосов
/ 12 апреля 2019

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

(текущий прогресс без CSS-файла связан ниже)

Теперь я хочу назначить цвет отвечающему пользователю пользователю.Я могу написать метод PHP, но я не уверен, как поместить возвращенное значение в поле.Когда я попытался использовать метод AJAX, полученный текст был «неопределен».Поэтому я прочитал его и понял, что функции AJAX выполняются параллельно с другими процессами.

Теперь главный вопрос: могу ли я как-то заставить JavaScript ждать, пока переменные не вернутся для дальнейшего построения календаря?Или я должен вставить цвета потом.Если так: как я могу это сделать?

Мне не нужно писать код.Некоторых объяснений или идей будет достаточно.

Спасибо! 

today = new Date();
currentMonth = today.getMonth();
currentYear = today.getFullYear();
currentWeek = getWeekNumber(today);
selectYear = document.getElementById("year");
selectMonth = document.getElementById("month");

months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

monthAndYear = document.getElementById("monthAndYear");
showCalendar(currentMonth, currentYear);




function next() {
    currentYear = (currentMonth === 11) ? currentYear + 1 : currentYear;
    currentMonth = (currentMonth + 1) % 12;
    showCalendar(currentMonth, currentYear);
}

function previous() {
    currentYear = (currentMonth === 0) ? currentYear - 1 : currentYear;
    currentMonth = (currentMonth === 0) ? 11 : currentMonth - 1;
    showCalendar(currentMonth, currentYear);
}

function jump() {
    currentYear = parseInt(selectYear.value);
    currentMonth = parseInt(selectMonth.value);
    showCalendar(currentMonth, currentYear);
}


function showCalendar(month, year) {

    let firstDay = (new Date(year, month)).getDay();

    tbl = document.getElementById("calendar-body"); // body of the calendar

    // clearing all previous cells
    tbl.innerHTML = "";

    // filing data about month and in the page via DOM.
    monthAndYear.innerHTML = months[month] + " " + year;
    selectYear.value = year;
    selectMonth.value = month;

    // creating all cells



    let helper = 0;
    let dt = new Date(year,month,1);
    let date = (1+germanDate(dt.getDay()));

    // document.getElementById('dies').innerHTML = ((dt.getDay())+"<br />"+daysInMonth(month, year)+"<br />"+date);


    for (let i = 0; i < 6; i++) {
        // creates a table row
        let row = document.createElement("tr");

        //creating individual cells, filing them up with data.
            if (date > daysInMonth(month, year)) {
                if (helper<5){
                    while (helper<5){
                        let row = document.createElement("tr");
                        cell = document.createElement("td");
                        cell.classList.add("text-white");
                        cell.classList.add("bg-white");
                        cell.setAttribute('disabled', true);
                        cellText = document.createTextNode('|');
                        cell.appendChild(cellText);
                        row.appendChild(cell);
                        tbl.appendChild(row);
                        helper++;
                    }
                }
                break;
            }

            else {
                let dt = new Date(year,month,date)
                cell = document.createElement("td");

                    cellText = document.createTextNode(''+getWeekNumber(dt)+'. Week'); //insert weeknumber

                if (getWeekNumber(dt) === currentWeek && year === today.getFullYear() && month === today.getMonth()) {
                    cell.classList.add("table-info");   //if the week is the current one, make the cell blue
                } // color today's date
                cell.classList.add("cursorPointer");    //CSS -> change Cursor on hover
                cell.classList.add("col-11");

                cell.appendChild(cellText);
                row.appendChild(cell);

                cell = document.createElement("td");    //New cell for the color
                cellText = document.createTextNode('');
                cell.classList.add("col-1");
                cell.classList.add("table-white");
                cell.appendChild(cellText);
                row.appendChild(cell);


                date+=7;
                helper++;

            }

        tbl.appendChild(row); // appending each row into calendar body.
    }

}



var result = getWeekNumber(new Date());
document.write('It\'s currently week ' +result +'');


// check how many days in a month code from https://dzone.com/articles/determining-number-days-month
function daysInMonth(iMonth, iYear) {
    return 32 - new Date(iYear, iMonth, 32).getDate();
}

//By RobG /4871106/poluchite-nedely-goda-v-javascript-kak-v-php
function getWeekNumber(d) {
    // Copy date so don't modify original
    d = new Date(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()));
    // Set to nearest Thursday: current date + 4 - current day number
    // Make Sunday's day number 7
    d.setUTCDate(d.getUTCDate() + 4 - (d.getUTCDay()||7));
    // Get first day of year
    var yearStart = new Date(Date.UTC(d.getUTCFullYear(),0,1));
    // Calculate full weeks to nearest Thursday
    var weekNo = Math.ceil(( ( (d - yearStart) / 86400000) + 1)/7);
    // Return array of year and week number
    return weekNo;
}



function goToDetails(monat, jahr){
    window.open('?kalenderDetails&jahr='+jahr+'&woche='+monat);
}

function germanDate($datum){
    switch($datum){
        case 1: return 0;
        case 0: return 1;
        default: return (8-$datum);
    }
}
.table {
    border-collapse: collapse !important; }
    .table td,
    .table th {
      background-color: #fff !important; }

  .table-bordered th,
  .table-bordered td {
    border: 1px solid #dee2e6 !important; }

  .table-dark {
    color: inherit; }
    .table-dark th,
    .table-dark td,
    .table-dark thead th,
    .table-dark tbody + tbody {
      border-color: #dee2e6; }

  .table .thead-dark th {
    color: inherit;
    border-color: #dee2e6; } }

/*# sourceMappingURL=main.css.map */
<!DOCTYPE html>
<html lang="de">

<head>
    <meta charset="utf-8">


    <link rel="icon" href="as" id=icon>


    <script src="JavaScript/Icon.js"> </script>
</head>

<body style="min-height: 100%">


<div class='container-fluid' style='height: 100%'>
    <div class="row" style="margin-top: 2em">
                    <div class="container col-12 col-lg-6">
                            <div class="card">
                                <h3 class="card-header" id="monthAndYear"></h3>
                                <div class="table-responsive">
                                    <table class="table table-bordered table-hover" id="calendar">
                            
                                        <tbody id="calendar-body">
                            
                                        </tbody>
                                    </table>
                                </div>
                        
                                <div class="form-inline">
                        
                                    <button class="btn btn-outline-primary col-sm-6 rounded-0" id="previous" onclick="previous()">Previous</button>
                        
                                    <button class="btn btn-outline-primary col-sm-6 rounded-0" id="next" onclick="next()">Next</button>
                                </div>
                                <br/>
                                <form class="form-inline">
                                    <label class="col-sm-4 text-left" for="month">Jump To: </label>
                                    <select class="form-control col-sm-4 rounded-0" name="month" id="month" onchange="jump()">
                                        <option value=0>Jan</option>
                                        <option value=1>Feb</option>
                                        <option value=2>Mar</option>
                                        <option value=3>Apr</option>
                                        <option value=4>May</option>
                                        <option value=5>Jun</option>
                                        <option value=6>Jul</option>
                                        <option value=7>Aug</option>
                                        <option value=8>Sep</option>
                                        <option value=9>Oct</option>
                                        <option value=10>Nov</option>
                                        <option value=11>Dec</option>
                                    </select>
                        
                        
                                    <label for="year"></label><select class="form-control col-sm-4 rounded-0" name="year" id="year" onchange="jump()">
                                    <option value=2018>2018</option>
                                    <option value=2019>2019</option>
                                    <option value=2020>2020</option>
                                    <option value=2021>2021</option>
                                    <option value=2022>2022</option>
                                    <option value=2023>2023</option>
                                    <option value=2024>2024</option>
                                    <option value=2025>2025</option>
                                    <option value=2026>2026</option>
                                    <option value=2027>2027</option>
                                    <option value=2028>2028</option>
                                    <option value=2029>2029</option>
                                    <option value=2030>2030</option>
                                </select></form>
                            </div>

                            
        </div>
    </div>
</div>

        </body>
</html>

1 Ответ

0 голосов
/ 12 апреля 2019

Когда вы используете вызов AJAX, он начинает выполняться, но остальная часть вашего кода не ждет его завершения, прежде чем продолжить, поэтому становится немного сложнее координировать выполнение вашего кода.

Что вам нужно сделать, так это дождаться ответа на вызов AJAX. Объект xmlHttpRequest вызовет событие, когда ответ будет завершен, поэтому вы можете прикрепить прослушиватель событий к этому событию и запустить код, который должен ждать завершения вызова AJAX, внутри обратного вызова прослушивателя событий.

Вначале это может быть сложно, но довольно просто, когда вы поймете, как это работает, имейте в виду, что в javascript некоторый код может выполняться одновременно, и вам необходимо координировать различные «потоки» через обратные вызовы.

Я настоятельно рекомендую прочитать «Javascript, хорошие части» от Дугласа Крокфорда, который является одной из самых проницательных книг о понимании некоторых важных вещей на этом языке, которые мы так любим и ненавидим.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...