Javascript 正确使用停止和延迟

我的js代码有一些问题。我想动画一个简单的点击功能，使一个div，显示下面的div，但动画后说5秒回来。我想我对fadeToggle和delay进行了正确的设置，但我不知道如何设置“过度点击”预防。我的意思是当人们弄乱点击对象时

我的第一次尝试是停止（true，true）。尽管它看起来像预期的那样工作（中止进一步的函数执行），但不幸的是，它在5秒后显示了底层div，尽管它应该显示上面的div（图）

以下是js和小提琴：

$(function() {
  $("#boxes li").on("click", function(){    
    $(this).find(".front,.back").stop(true, true).fadeToggle(800).delay(5000).fadeToggle(800); 
  });
});

还有一个js fiddle链接，看看我的意思：

问候,

---

PS：首先尝试单击一次以查看我想要达到的效果，然后单击两次以查看5秒后如何显示文本div。

我对其进行了一些修改

但是仍然需要做一些工作，您可以使用一些带有click的标志变量

请查看更新的，它处理该过程，但存储淡出后发生的下一次单击

更新：避免双击

创建一个标志是，您将创建一个布尔变量，该变量为true/false。（或带0或1的int变量）

比如：

var flg=true

现在，这个名为flag的变量，flag是用False/True值启动的（根据要求），然后我们将在事件发生后修改flag（我们要注意的事件，这里单击按钮）。一旦事件发生，我们将更改flag

在第二步中，您将向条件添加标志
if（condition==true&&flag==true）{..}
so，if标志在事件发生后更改为false/单击if中的事件不会再次发生

我希望这会有所帮助。
谢谢@MarmiK，但这并没有如我所愿起作用。你可以通过连续点击两次很容易地搞糟这件事。其他建议？您需要创建标志，该标志将在每次单击后更改，并在正常后再次更改。好的，谢谢。我稍后再查。也许我应该提到我是js的初学者，flag现在没有告诉我任何事情。嘿@MarmiK，我只是不明白你创建flag的意思。你能给我一个提示吗？