Question

我想在致电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>

Answer 2

如果您不想使用超时，则可以使用worker。这样您就可以长时间运行较重的负载，而这些负载所花费的时间超过了超时时间。

注意1：：此功能在所有浏览器中均有效，但在FireFox中效果最好。
注意2： Edge在使用createObjectURL时抱怨内联脚本，因此使用外部脚本会更好。

// Get the worker form an inline script
var blob = new Blob([document.querySelector('#worker1').textContent ], { type: "text/javascript" })
// Get the URL to the worker (can use an external file)
var worker = new Worker(window.URL.createObjectURL(blob))

// Listen for messages from the worker
// When when get one handle it
worker.onmessage = function(e) {
  console.log(e.data)
}

// Once clicked change the color, then send a message to the worker
$("button").click(function() {
  $("button").css("background-color", "#6ddc5d")
  worker.postMessage('')
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>lol</button>

<!-- Place the contents of the below script in an external js file if desired -->
<script id="worker1" type="javascript/worker">
// Listen for messages from the main process
self.onmessage = function(e) {
  for (var i = 0; i < 2000; i++) {
    // Send messages back to the main process
    self.postMessage(i)
  }
  return 0;
}
</script>

上面的示例使用一个内联工作程序，如果需要，您可以将其替换为外部.js文件，只需删除var blob = ...行并将window.URL.createObjectURL(blob)替换为文件的网址。

Answer 3

我想您希望它单独执行。在这种情况下，您需要使其与setTimeout异步。

function testFunction() {
  for (var i = 0; i < 200; i++) {
    console.log(i);
  }
  return 0;
}

$("button").click(function() {
  $("button").css("background-color", "#6ddc5d");
  setTimeout(function() { testFunction(); },0);
});

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

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

3 个答案: