bool 值上的 JavaScript NOT 运算符

Question

所以我终于得到了一段可以工作的代码，但我很难理解它为什么能工作。我的 CSS 基本上有一个将盒子动画化为圆形的 Sprite 表。

animation-play-state : paused; 是我的 CSS 中的一条规则，它可以防止 Sprite 在按下键之前开始其动画，正如您将在 JavaScript 代码中看到的那样。

我的问题是当 keycheck 为 false 时，为什么 if 执行代码块。根据我对 ! 运算符如何工作的了解，代码是不是只假设在 keycheck 为“NOT” false 时执行？它的初始值为 false 那么它为什么会运行呢？

代码假设在按住某个键时停止重复执行事件。

keycheck = false;

window.addEventListener("keydown", checkKey_DN, false);
window.addEventListener("keyup", checkKey_UP, false);

function checkKey_DN(e) {
    if(e.keyCode == "83" && !keycheck){
        keycheck = true;
        $("boxMorph").style.animationPlayState = "running";
        $("boxMorph").style.WebkitAnimationPlayState = "running";
        $("boxMorph").style.visibility = "visible";
        $("boxMorph").classList.remove ("boxes");
        $("boxMorph").offsetWidth = $("boxMorph").offsetWidth;
        $("boxMorph").classList.add ("boxes");      

      }
  }

function checkKey_UP(e){
    if(e.keyCode == "83"){
        keycheck = false;
        $("boxes").style.visibility = "hidden";
      }
  }

这段代码有助于重新激活 CSS Sprite 。

$("boxMorph").classList.remove ("boxes");
$("boxMorph").offsetWidth = $("boxMorph").offsetWidth;
$("boxMorph").classList.add ("boxes");  

Answer 1

您误解了 NOT - 它返回值的倒数:

if(false) { /* this block will not be executed */ }

if(!false) { /* this block will be executed */ }

这是因为 !false 的计算结果为 true，相当于:

if(true) { /* this block will be executed */ }

检查 if(!keycheck) 只有在 keycheck 的值为假时才会成功，例如keycheck = false。