时间戳

首页 > 解决方案 > 如何在 JavaScript 中“等待”

javascript - 如何在 JavaScript 中“等待”

问题描述

我有一个用 jQuery 用 javascript 编写的小型 Chrome 扩展程序，它应该从网页中获取一些数据。目标 HTML 如下所示：

<div id="options">
  <div class="option"><div class="checkbox">1</div></div>
  <div class="option"><div class="checkbox">3</div></div>
  <div class="option"><div class="checkbox">5</div></div>
  <div class="option"><div class="checkbox">Other value</div></div>
  ...
</div>
<div id="result">0</div>

当任何一个.checkbox被选中#result时都会改变。我的任务是.checkbox一一检查并获得#result每个。

var result = {};
// for each checkbox
$('#options .option').each(function(){
  // check it
  this.click()
  // wait a bit. Of course ideally if we can wait while #result is not changed but in practice sometimes checkbox doesn't change the result. So it will be enough to wait a few seconds
  // store data
  result[this.text()] = $('#result').text();
  // uncheck the checkbox
  this.click()
  // wait
});
console.log(result);

任何想法如何正确等待？谢谢

UPD：显示我的问题的一个小例子https://codepen.io/mihajlo-osadchij/pen/MNyazz

标签： javascriptjquerygoogle-chrome-extension

解决方案

正如其他人所说，您应该使用事件处理程序而不是手动等待。这是一个基本示例，说明如何绑定更改事件以获取已更改的复选框的值。

如果您确实使用了类似的东西setTimeout，那么您实际上会因为糟糕的设计而故意减慢您的应用程序。

$('.checkbox').on('change', (evt) => {
	console.log(evt.target.value);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="checkbox" value="1" />
<input type="checkbox" class="checkbox" value="2"  />
<input type="checkbox" class="checkbox" value="3"  />
<input type="checkbox" class="checkbox" value="4"  />

推荐阅读