Javascript 在比较classList.contains的if-else语句时，如何在没有setInterval的情况下更新类？

我需要一个解决方案来比较JavaScript中的

classList.contains

。 当我在不使用

setInterval

的情况下进行比较时，类列表不起作用，但我需要一个不使用

setInterval

的解决方案，因为它正在更新我只需要使用

classList.contains

时单击

onclick

。请参阅下面的代码

let ctx=document.querySelector（'.control'）；
ctx.onclick=（）=>{
box.classList.toggle（'rds'）；
document.onclick=null；//重要的想法
box.classList.remove（'ok'）
}
设置间隔（（）=>{
if（box.classList.contains（'rds'））{
document.onclick=（）=>{
box.classList.remove（'rds'）；
box.classList.add（'ok'）
}
}否则{
document.onclick=null；//重要的想法
}
}，1）

.box{
宽度：200px；
高度：200px；
背景：红色；
过渡：1s；
}
.rds{
边界半径：50%；
}
.好的{
边框：10px点蓝色；
}

此处控制

我理解你的意思。但您还应该提供动画的行为。 我做了2个没有设置间隔的变体，请检查。若你们觉得合适的话，把答案标记为正确

JSFIDLE 1：

JSFIDLE 2：

此处控制
函数更新（）{
const-box=document.getElementById（'box'）；
box.classList.add（'rds'）；
box.classList.add（'ok'）；
设置超时（（）=>{
if（box.classList.contains（'rds'））{
console.log（'ECIS'）
box.classList.remove（'rds'）；
} 
}, 1000)
}

问题 OP1（akaO最初的poster--aka）对

setInterval（）

的使用（误用？…滥用？）只是切换

.box

的“状态”（例如

.ok

和

.rds

）的一种手段

关于OP对以下陈述的误解（或未能正确解释）：

document.onclick = null; // important idea

据我所知，OP担心

document

会检测到click事件并调用事件处理程序，从而导致两次快速连续调用事件处理程序。一次是通过

文档

，另一次是通过

.control

——因此人们误认为

setInterval（）

在这种特殊情况下很有用

---

2. OP将事件处理程序视为普通的匿名函数（这就是为什么OP创建两个单独的函数来更改两个单独的“状态”，并在调用发生和不应该发生时挣扎）

• 标准匿名函数
  匿名函数在解析时被定义和调用。当浏览器注意到括号（ex.

  function（）

  ）时，它会将其解释为：“立即运行此函数”

• 事件处理程序
  事件处理程序是在运行之前等待注册事件发生的函数。注意他们的共同点：

  //~~~~ Defined (aka Named)
  domNode.onclick = functionName; 
  /* or */ 
  domNode.addEventListener('click', functionName);
  
  function functionName(eventObject) {...
  
  /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  
  //~~~ Anonymous
  domNode.onclick = function(eventObject) {... 
  /* or */ 
  domNode.addEventListener('click', function(eventObject) {...
  

  • 触发已注册事件时，将调用事件处理程序，因此只有在定义事件处理程序时才包含括号。注意：已定义的事件处理程序没有括号

    （）

    ，因为它们的定义被提升到顶部

  • 默认情况下，事件处理程序也会传递。定义事件处理程序时，始终将其作为第一个参数。通过显式传递事件对象（通常为

    e

    ，

    event

    ，

    evt

    …），事件处理程序可以访问事件对象的属性，例如，

    event.currentTarget

    和

    event.target

  • 是注册到某个事件的对象（通常是a）（它“侦听”某个特定事件的发生）。在其关联事件处理程序的定义中，它也被称为

  • 是注册事件起源于的对象。例如，如果单击了一百个相同按钮中的第五个按钮，

    event.target

    将准确引用该特定按钮

希望事件处理程序是什么以及它的作用更清楚一点。而且事件对象是多么不可或缺。下一节将解释事件阶段，详细说明事件中发生的不可见事件链

---

---

完全删除间隔，并在ctx clickhandler函数中实现逻辑。不工作的人，你能给我一个代码片段吗？事实上，没有setInterval的类没有更新，但尝试了document.onmousemove=（）{/*structure*/}工作，如果你有任何想法，请告诉我，我需要document和box onclick，而不需要setInterval或setTimeout只需从我的js代码中删除setInterval，看，document onclick不起作用，但我需要document onclick而不需要setInterval或setTimeout，实际上，box类在添加新类后没有更新，但我需要在没有更新的情况下进行更新setInterval@NIKHILCHANDRAROY当文档检测到它已被单击时，您预期会发生什么行为？我所看到的是，它完全不做任何事情（
null，准确地说是
）。但是你想做什么，我不明白。单击此处的控制按钮，然后单击文档。它将添加ok类并删除框Classis中的rds类。我需要此行为而不需要设置间隔
const nodeRef = () => {... 
/* or */  
var nodeRef = function() {...

//~~~~ Defined (aka Named)
domNode.onclick = functionName; 
/* or */ 
domNode.addEventListener('click', functionName);

function functionName(eventObject) {...

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

//~~~ Anonymous
domNode.onclick = function(eventObject) {... 
/* or */ 
domNode.addEventListener('click', function(eventObject) {...