Is this warning something I should be worried about?
Definitely. :-) The warning is there for a reason - it will have a negative impact on the user experience.
What alternative approach should I take instead?
You can continue using asynchronous ajax and ensure to call the necessary functions from the completion handler.
If you are using XHR:
const xhr = new XMLHttpRequest();
xhr.addEventListener("load", () => {
// Call your desired functions here
});
xhr.addEventListener("error", () => {
// Handle any errors here
});
xhr.open("GET", "/path/to/the/resource");
xhr.send();
Alternatively, consider using fetch:
fetch("/path/to/the/resource")
.then(response => {
if (!response.ok) {
throw new Error("HTTP error " + response.status);
}
return response.appropriateMethodToReadBodyHere();
})
.then(data => {
// Call your functions here
})
.catch(error => {
// Handle errors here
});
You could also utilize an async function:
try {
const response = await fetch("/path/to/the/resource");
if (!response.ok) {
throw new Error("HTTP error " + response.status);
}
const data = await response.appropriateMethodToReadBodyHere();
// Call your functions here
} catch (error) {
// Handle errors here
}
A piece of code has been modified. Here's an example with minimal changes:
function changeSection(section, page, button, sync=true, callback = () => {})
// *** ------------------------------------------------^^^^^^^^^^^^^^^^^^^^^
{
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
$(section).empty();
$(section).append(this.responseText);
clearButtons();
setButton(button);
callback(); // ***
}
};
xhttp.open("GET", page, sync);
xhttp.send();
}
function setLagrange() {
path = MathLog_path + "modelling/lagrange_interpolation.html";
changeSection("#VolatileSection", path, "lagrange_button", false, () => {
// *** ---------------------------------------------------------^^^^^^^^^
$('pre code').each(function(i, block) {
hljs.highlightBlock(block);
});
MathJax.Hub.Config({
tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}
});
MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
});
//^^^ ***
}
...considering ES2015+ features, utilizing fetch and returning a promise from changeSection would be preferable:
function changeSection(section, page, button, sync=true)
{
return fetch(page)
.then(response => {
if (!response.ok) {
throw new Error("HTTP error " + response.status);
}
return response.text();
})
.then(() => {
$(section).empty();
$(section).append(this.responseText);
clearButtons();
setButton(button);
});
}
function setLagrange() {
path = MathLog_path + "modelling/lagrange_interpolation.html";
changeSection("#VolatileSection", path, "lagrange_button", false).then(() => {
// *** ----------------------------------------------------------^^^^^^
$('pre code').each(function(i, block) {
hljs.highlightBlock(block);
});
MathJax.Hub.Config({
tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}
});
MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
});
}
or by using async functions:
async function changeSection(section, page, button, sync=true)
{
const response = await fetch(page);
if (!response.ok) {
throw new Error("HTTP error " + response.status);
}
await response.text();
$(section).empty();
$(section).append(this.responseText);
clearButtons();
setButton(button);
}
async function setLagrange() {
path = MathLog_path + "modelling/lagrange_interpolation.html";
await changeSection("#VolatileSection", path, "lagrange_button", false);
$('pre code').each(function(i, block) {
hljs.highlightBlock(block);
});
MathJax.Hub.Config({
tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}
});
MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
}
Remember that setLagrange needs to be called from within an async function or its promise must be handled explicitly:
setLagrange(/*...*/)
.catch(error => {
// Handle any errors
});