Analysis by Claude Code.
Problem
Web/scripts/reservation.js:862-870 uses async: false in a $.ajax() call within the getLayoutItems() function. This blocks the browser's main thread while fetching schedule layout data, freezing the entire UI until the request completes (or times out).
Synchronous XMLHttpRequest on the main thread is deprecated by all major browsers and Chrome already shows console warnings for it.
Current code
var getLayoutItems = function (scheduleId, date) {
// ...cache check...
$.ajax({
url: 'schedule.php',
dataType: 'json',
data: { dr: 'layout', sid: scheduleId, ld: date },
success: function (data) {
layoutCache[weekday] = data.periods;
},
async: false,
});
return layoutCache[weekday];
};
The reason async: false is used is so the function can return the result synchronously. Two callers depend on this:
PopulatePeriodDropDown() (line ~899) — uses the return value to populate period <select> dropdowns
previousDateEndsAtMidnight() (line ~847) — calls getLayoutItems() for its side effect on layoutCache, then reads the cache
Proposed fix
Convert getLayoutItems() to return a Promise (or use a callback), and make its callers async-aware:
- Change
getLayoutItems() to return a $.ajax() Promise (just remove async: false and return the jqXHR)
- Update
PopulatePeriodDropDown() to use .done() / .then() to populate the dropdown after the response arrives
- Update
previousDateEndsAtMidnight() similarly, chaining the result
- Keep the
layoutCache optimization — when the cache hits, resolve immediately without a network call
Acceptance criteria
- No
async: false in the codebase
- Period dropdowns still populate correctly when changing reservation dates
- Layout cache still works (no redundant requests for the same weekday)
- No visible UI regression on the reservation page
Analysis by Claude Code.
Problem
Web/scripts/reservation.js:862-870usesasync: falsein a$.ajax()call within thegetLayoutItems()function. This blocks the browser's main thread while fetching schedule layout data, freezing the entire UI until the request completes (or times out).Synchronous XMLHttpRequest on the main thread is deprecated by all major browsers and Chrome already shows console warnings for it.
Current code
The reason
async: falseis used is so the function canreturnthe result synchronously. Two callers depend on this:PopulatePeriodDropDown()(line ~899) — uses the return value to populate period<select>dropdownspreviousDateEndsAtMidnight()(line ~847) — callsgetLayoutItems()for its side effect onlayoutCache, then reads the cacheProposed fix
Convert
getLayoutItems()to return a Promise (or use a callback), and make its callers async-aware:getLayoutItems()to return a$.ajax()Promise (just removeasync: falseand return the jqXHR)PopulatePeriodDropDown()to use.done()/.then()to populate the dropdown after the response arrivespreviousDateEndsAtMidnight()similarly, chaining the resultlayoutCacheoptimization — when the cache hits, resolve immediately without a network callAcceptance criteria
async: falsein the codebase