我在一个显示加载进度条的函数周围构建了一个包装器,并在执行该函数后使其消失。现在它不显示进度条,除非我在执行函数foo时设置断点。
我在进度onload事件上运行它有一点成功,但是它没有执行endLoading
:
function sleep(milliseconds) {
var start = new Date().getTime();
for (var i = 0; i < 1e7; i++)
if ((new Date().getTime() - start) > milliseconds) break;
}
var progress = document.createElement('progress');
var fillElement = document.body;
function foo() {
console.log('foo start');
sleep(2000);
fillElement.innerHTML = 'Bar';
console.log('foo end');
}
function startLoading() {
console.log('start');
fillElement.innerHTML = '';
fillElement.appendChild(progress);
}
function endLoading() {
console.log('end');
fillElement.removeChild(progress);
}
startLoading();
foo(); // if the debug point is set here i can see the progress bar
endLoading();
答案 0 :(得分:0)
function foo() {
console.log('foo start');
setTimeout(function () {
fillElement.innerHTML = 'Bar';
console.log('foo end');
}, 2000);
}
应该相当于
function foo() {
console.log('foo start');
sleep(2000);
fillElement.innerHTML = 'Bar';
console.log('foo end'); }
您可以将操作链接在一起
startLoading(chain(foo, endLoading));
function chain(x, y) {
return function () { x(y); }
}
function foo(afterwards) {
console.log('foo start');
setTimeout(
function () {
fillElement.innerHTML = 'Bar';
console.log('foo end');
afterwards();
},
2000);
}
并对startLoading
执行类似的继续传递转换。您还可以查看可以简化这种编码风格的期货。