javascript - 如何在调用函数或执行其他操作之前更改背景颜色

我想在调用testFunction()之前更改“lol”按钮的颜色。

function testFunction() {
  for (var i = 0; i < 200; i++) {
    console.log(i);
  }
  return 0;
}

$("button").click(function() {
  $("button").css("background-color", "#6ddc5d");
  testFunction();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>lol</button>

没有功能，我该怎么办？下面的示例代码:

$("button").click(function() {
  $("button").css("background-color", "#6ddc5d");

  // change color, then run this below operation

   for (var i = 0; i < 200; i++)
    console.log(i);

    // more stuff here


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>lol</button>

最佳答案

问题是因为您正在运行的循环是同步的。这会阻止UI线程更新您修改的背景颜色。

要解决此问题，请在超时时间内以testFunction()延迟调用0:

function testFunction() {
  for (var i = 0; i < 200; i++) {
    console.log(i);
  }
  return 0;
}

$("button").click(function() {
  $("button").css("background-color", "#6ddc5d");
  setTimeout(testFunction, 0);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>lol</button>

没有功能的版本的逻辑是相同的，只需要将其包装在setInterval()中:

$("button").click(function() {
  $("button").css("background-color", "#6ddc5d");

  setTimeout(function() {
    for (var i = 0; i < 200; i++) {
      console.log(i);
    }
  }, 0);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>lol</button>