Question

我在一个显示加载进度条的函数周围构建了一个包装器，并在执行该函数后使其消失。现在它不显示进度条，除非我在执行函数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();

Answer 1

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执行类似的继续传递转换。您还可以查看可以简化这种编码风格的期货。

为什么在调试时只更新DOM？

1 个答案: