Question

我是javascript的新手，不幸的是（或者幸运的是？）已经解决了js中异步事件的问题。我知道我们应该使用回调，我确实尝试使用它们没有好结果。

有3个函数可以填充条形图，我怎么能使用回调来使条形图一个接一个地填充？

var x1 = 0;
var x2 = 0;
var x3 = 0;
var lifeRemaining = 100 - (getPercentage(age, lifeExpectancy) + getPercentage(
    effLifeRemaining, lifeExpectancy));

function ShowBar1() {
    if (x1 < getPercentage(age, lifeExpectancy)) {
        x1 += 1;
        var y1 = "width: " + x1.toString() + "%";
        progressBar1.setAttribute("style", y1);
        progressBar1.textContent = x1.toString() + "%";
    }
}

function ShowBar2() {
    if (x2 < getPercentage(effLifeRemaining, lifeExpectancy)) {
        x2 += 1;
        var y2 = "width: " + x2.toString() + "%";
        progressBar2.setAttribute("style", y2);
        progressBar2.textContent = x2.toString() + "%"
    }
}

function ShowBar3() {
    if (x3 < lifeRemaining) {
        x3 += 1;
        var y3 = "width: " + x3.toString() + "%";
        progressBar3.setAttribute("style", y3);
        progressBar3.textContent = x3.toString() + "%";
    }
}
setInterval(ShowBar1, 50);
setInterval(ShowBar2, 50);
setInterval(ShowBar3, 50);

Answer 1

如果您有回调，则无需使用间隔。您可以参考下面的示例回调：

var x1 = 0;
var x2 = 0;
var x3 = 0;
var lifeRemaining = 100 - (getPercentage(age, lifeExpectancy) + getPercentage(
    effLifeRemaining, lifeExpectancy));

function ShowBar1(callback) {
    if (x1 < getPercentage(age, lifeExpectancy)) {
        x1 += 1;
        var y1 = "width: " + x1.toString() + "%";
        progressBar1.setAttribute("style", y1);
        progressBar1.textContent = x1.toString() + "%";
    }

    return callback;
}

function ShowBar2(callback) {
    if (x2 < getPercentage(effLifeRemaining, lifeExpectancy)) {
        x2 += 1;
        var y2 = "width: " + x2.toString() + "%";
        progressBar2.setAttribute("style", y2);
        progressBar2.textContent = x2.toString() + "%"
    }

    return callback;
}

function ShowBar3() {
    if (x3 < lifeRemaining) {
        x3 += 1;
        var y3 = "width: " + x3.toString() + "%";
        progressBar3.setAttribute("style", y3);
        progressBar3.textContent = x3.toString() + "%";
    }
}

var bar2 = ShowBar1(ShowBar2);
var bar3 = bar2(ShowBar3);
bar3();

您可以参考下面的回调，以50毫秒的延迟执行3功能。我只是为了简化而删除了额外的代码。

function ShowBar1(callback, callback2) {
    console.log('ShowBar1');
    callback(callback2);
}

function ShowBar2(callback) {
    console.log('ShowBar2');
    callback();
}

function ShowBar3() {
    console.log('ShowBar3');

    setTimeout(ShowBar1, 50, ShowBar2, ShowBar3);
}

ShowBar1(ShowBar2, ShowBar3);

Answer 2

所有三个时间间隔永远并行运行

你必须做这样的事情：

var x1 = 0;
var x2 = 0;
var x3 = 0;
var lifeRemaining = 100 - (getPercentage(age, lifeExpectancy) + getPercentage(
    effLifeRemaining, lifeExpectancy));

var curInterval;

curInterval = setInterval(ShowBar1, 50)

function ShowBar1() {
    if (x1 < getPercentage(age, lifeExpectancy)) {
        x1 += 1;
        var y1 = "width: " + x1 + "%";
        progressBar1.setAttribute("style", y1);
        progressBar1.textContent = x1 + "%";
    } else {
        clearInterval(curInterval);
        curInterval = setInterval(ShowBar2, 50)
    }
}

function ShowBar2() {
    if (x2 < getPercentage(effLifeRemaining, lifeExpectancy)) {
        x2 += 1;
        var y2 = "width: " + x2 + "%";
        progressBar2.setAttribute("style", y2);
        progressBar2.textContent = x2 + "%"
    } else {
        clearInterval(curInterval);
        curInterval = setInterval(ShowBar3, 50)
    }
}

function ShowBar3() {
    if (x3 < lifeRemaining) {
        x3 += 1;
        var y3 = "width: " + x3 + "%";
        progressBar3.setAttribute("style", y3);
        progressBar3.textContent = x3 + "%";
    } else {
        clearInterval(curInterval);
    }
}

Answer 3

在这里，终于解决了它，使用回调，所有三个栏开始一个接一个地填充，见

  function ShowBar1(callback) {
      var x1 = 0;
      var y1;
      progressBar2.setAttribute("style", "width: 0%");
      progressBar3.setAttribute("style", "width: 0%");
      var test = setInterval(function() {
          x1 += 1;
          y1 = "width: " + x1.toString() + "%";
          progressBar1.setAttribute("style", y1);
          progressBar1.textContent = x1.toString() + "%";
          if (x1 === getPercentage(age, lifeExpectancy)) {
              clearInterval(test);
              callback(); //bar 2 starts filling using callback
          }
      }, 50);
  }

  function ShowBar2() {
      var x2 = 0;
      var y2;
      var test2 = setInterval(function() {
          x2 += 1;
          y2 = "width: " + x2.toString() + "%";
          progressBar2.setAttribute("style", y2);
          progressBar2.textContent = x2.toString() + "%"
          if (x2 === getPercentage(effLifeRemaining,
              lifeExpectancy)) {
              clearInterval(test2);  //bar 3 starts filling from this point
              var x3 = 0;
              var y3;
              var test3 = setInterval(function() {
                  x3 += 1;
                  y3 = "width: " + x3.toString() + "%";
                  progressBar3.setAttribute("style", y3);
                  progressBar3.textContent = x3.toString() +
                      "%";
                  if (x3 == lifeRemaining) {
                      clearInterval(test3);
                  }
              }, 50);
          }
      }, 50);
  }
  ShowBar1(ShowBar2);

使用回调的Javascript异步填充栏

3 个答案: