时间戳

首页 > 解决方案 > 如何在调用函数或执行其他操作之前更改背景颜色

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

问题描述

我想在调用之前更改“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>

标签： javascriptjquery

解决方案

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

没有该功能的版本的逻辑是相同的，您只需将其包装在 a 中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>

推荐阅读