Temporary JavaScript onclick切换

Question

我花了一段很长时间才弄明白这个问题。我有一张表格。

<form id="form1" .. target="right" action="blablah">
<input .. />
<input type="submit" id="ycsubmit" onclick="..." value="Go!" />
</FORM>

我有一个需要在提交时执行的函数: ycClick()；

一旦执行了ycClick()，我需要将onClick切换为null 30秒，然后再切换回来，这样如果在30秒后再次按下，它将再次执行ycClick()，然后禁用它30秒，依此类推。我已经尝试了100种不同的方法，但我现在得到的是：

function ycClick(){
...
}

var isEnabled = true;

function toggleSubmit() {
    if (isEnabled = true) {
        document.getElementById("ycsubmit").onclick = null;
    } else {
        document.getElementById("ycsubmit").onclick = timer();
    } 
//isEnabled = !isEnabled;
}

function timer(){
ycClick();
toggleSubmit();
setTimeout("toggleSubmit()", 30000);
}

然后将onclick设置为触发timer()；这将关闭timer()，后者会关闭ycClick()，然后将onclick切换为null，但在30秒后不会将其切换回来。我怀疑这与这句话有关：

isEnabled = !isEnabled;

但是移除并没有什么不同，它的操作仍然是一样的。

Answer 1

你可以这样做：

function ycClick () {
    var timestamp = +( new Date );
    if ( ycClick.timestamp && timestamp - ycClick.timestamp < 30000 ) return;
    ycClick.timestamp = timestamp;

    // the actual code of the function
}

现场演示： http://jsfiddle.net/znKRC/7/

在我的演示中，重复单击该按钮，您会注意到该函数的第二部分每3秒才执行一次。因此，上述函数的前三行确保仅当后续代码在最后30秒内未执行时才执行它。

Answer 2

有许多方法可以改进您的代码；其中一些是简单的错误，另一些则表明您应该学习DOM和JavaScript运行时的其他一些特性。以下是我注意到的，按顺序排列：

错误

• 您在测试if (isEnabled = true){时犯了一个常见的错误。单个=是一个赋值，因此您的代码不会测试isEnabled是否为真。相反，它将测试赋值的结果，该结果始终为true。使用一个等于===的三元组来测试isEnabled当前是否为真。(您还将看到double equals ==__，但此运算符可能具有意想不到的效果且不太严格，因此应尽量避免使用它。)
• 在document.getElementById("ycsubmit").onclick = timer();行上，您应该在timer之后去掉括号。有了括号，您就可以执行timer 函数，而不是将引用分配给该函数。onclick方法将被设置为timer的返回值，因为您没有指定return语句，所以onclick的返回值将是false。我们永远不会将isEnabled设置为false！在当前设置中，您应该将isEnabled = !isEnabled行留在！

中

方法问题

• 上面的答案演示了一种更好的禁用表单提交的方法。您不应该尝试设置和取消设置onclick处理程序；相反，您应该处理处理程序本身内的重复单击。实际上，它甚至可以更简单:如果这个表单是正常提交的，而不是由JavaScript验证或通过AJAX发送的，那么您可以简单地禁用输入，而不用担心重新启用它，因为当服务器完成表单提交的处理时，表单将刷新或导航离开。页面将消失或重新加载，并启用提交按钮！
• 您不应使用提交按钮上的单击事件来阻止表单提交。表单有一个用于此目的的提交事件。在某些浏览器中，可以通过return键提交表单，这将绕过您的单击事件。您应该订阅表单的提交事件。
• 一开始就不应该使用"onclick“属性来分配事件处理程序。您应该向DOM元素添加事件侦听器。这会产生更灵活的事件--例如，您可以将多个事件分配给同一个元素--并更好地处理事件执行的范围。最后，它将文档的表示和行为与其内容分开。这是jQuery和其他流行的库的做法。我知道这需要更多的编码，但这就是像jQuery这样的操作库存在的原因。你应该试一试！

Answer 3

简单的答案是使用函数“JavaScript (){}，t)”，其中setTimeout是要执行的命令，t=以毫秒为单位的时间。

此外，您可能想要设置对象样式以隐藏元素。