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

Question

我想在调用之前更改"lol"按钮的颜色testFunction().

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>

Answer 1

问题是因为您正在运行的循环是同步的.这会阻止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>