Jquery 递归函数...然后,警报
Jquery recursive function... then, alert
我有一个带 "if/else" 条件的递归函数。
我想在条件完成时打开 "alert" window,
但是 "alert" window 在条件结束之前打开。为什么?
function myFunc(num) {
newNum = num + 1;
if (newNum < 10000) {
$('body').append(newNum + ', ');
myFunc(newNum);
} else {
alert("...finished !")
}
}
myFunc(1);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
一旦 Javascript 完成其同步代码的执行并且资源空闲,浏览器将仅呈现由 Javascript 发起的更改。您可以在 setTimeout
之后提醒:
function myFunc(num) {
newNum = num + 1;
if (newNum < 10000) {
$('body').append(newNum + ', ');
myFunc(newNum);
} else {
setTimeout(() => alert("...finished !"), 200);
}
}
myFunc(1);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
或者,如果您希望警报尽快发生而不使用像 200 这样的幻数,您可以排队 setAnimationFrame
回调(这将 运行 在浏览器重绘之前) ,在该回调中调用 setTimeout
,以便 setTimeout
运行 在重绘后立即发生:
function myFunc(num) {
newNum = num + 1;
if (newNum < 10000) {
$('body').append(newNum + ', ');
myFunc(newNum);
} else {
window.requestAnimationFrame(() => {
setTimeout(() => alert("...finished !"));
});
}
}
myFunc(1);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
我有一个带 "if/else" 条件的递归函数。 我想在条件完成时打开 "alert" window, 但是 "alert" window 在条件结束之前打开。为什么?
function myFunc(num) {
newNum = num + 1;
if (newNum < 10000) {
$('body').append(newNum + ', ');
myFunc(newNum);
} else {
alert("...finished !")
}
}
myFunc(1);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
一旦 Javascript 完成其同步代码的执行并且资源空闲,浏览器将仅呈现由 Javascript 发起的更改。您可以在 setTimeout
之后提醒:
function myFunc(num) {
newNum = num + 1;
if (newNum < 10000) {
$('body').append(newNum + ', ');
myFunc(newNum);
} else {
setTimeout(() => alert("...finished !"), 200);
}
}
myFunc(1);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
或者,如果您希望警报尽快发生而不使用像 200 这样的幻数,您可以排队 setAnimationFrame
回调(这将 运行 在浏览器重绘之前) ,在该回调中调用 setTimeout
,以便 setTimeout
运行 在重绘后立即发生:
function myFunc(num) {
newNum = num + 1;
if (newNum < 10000) {
$('body').append(newNum + ', ');
myFunc(newNum);
} else {
window.requestAnimationFrame(() => {
setTimeout(() => alert("...finished !"));
});
}
}
myFunc(1);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>