Question

我不确定为什么会这样。我以为javascript的执行是相当简单的，但是似乎我跳过了一行代码。这是codepen。

基本上，当我单击复选框时，我希望不可见的<div>变为可见，然后返回不可见。不知何故它被跳过了。我添加了一个长循环，以确保它不只是没有闪光灯就消失得很快，但是..我不知道。

function change_state(chx) {
  alert('in');
  if (chx.checked) {
    alert('hey its checked');
    $('#divWait').css('display', 'table'); // this <div> never shows up
    DoStuff();
    $('#divWait').css('display', 'none');
  } else {
    alert('not checked');
  }
}

function DoStuff() {
  var x = 0
  while (x < 1000000) {
    x = x + 1;
  }
  alert(x);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="color: white;">
  Change Div State
  <input onchange="change_state(this)" type="checkbox" value="something" id="btnState" />
</div>

<div id="divWait" style="width: 200px; height: 50px; background-color: blue; color: yellow; display: none;">
  What the eff???
</div>

感谢您的帮助。

Answer 1

正如@NikosM在他的评论中指出的那样，您应该使用setTimeout()在一段时间延迟后调用一段代码。出于两个原因，使用循环无济于事：

现代系统运行速度非常快，您的简单循环所引起的任何延迟都不会引起注意
循环将阻止执行脚本，使用户界面无响应，并且不能保证在控件处于循环内时，在循环之前应用的样式更改将立即得到体现

解决方案：

将代码包装起来，将div隐藏在setTimeout()中，并指定延迟时间，以毫秒为单位。。

function change_state(chx) {
  console.log('in');
  if (chx.checked) {
    console.log('hey its checked');
    $('#divWait').css('display', 'table'); // this <div> never shows up
    
    setTimeout(function() {
      console.log('hiding div');
      $('#divWait').css('display', 'none');
    }, 3000); // Specify timeout in milliseconds
  } else {
    console.log('not checked');
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="color: white;">
  Change Div State
  <input onchange="change_state(this)" type="checkbox" value="something" id="btnState" />
</div>

<div id="divWait" style="width: 200px; height: 50px; background-color: blue; color: yellow; display: none;">
  What the eff???
</div>

请注意，我已将alert()替换为console.log()，以删除烦人的警报框。

使用JQuery / Javascript设置div样式已被跳过

1 个答案: