1

我很难弄清楚这一点。我有一个表格。

<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;

但删除没有任何区别，它的操作仍然完全相同。

4

3 回答 3

2

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

错误

  • 你在测试时犯了一个常见的错误if (isEnabled = true){。单=是一个分配，因此您的代码不会测试 isEnabled 是否为真。相反，它正在测试分配的结果，它始终是true. 使用三等号===来测试isEnabled当前是否为真。（您还会看到一个双等号==，但此运算符可能会产生意想不到的效果并且不太严格，因此请尽量避免使用它。）
  • 就行了document.getElementById("ycsubmit").onclick = timer();，你应该去掉后面的括号timer。使用括号，您正在执行timer函数，而不是分配对该函数的引用。onclick 方法被设置为 的返回值timer，由于您没有指定return语句，它将是undefined.
  • 你永远不会设置isEnabled为假！在您当前的设置中，您应该把isEnabled = !isEnabled线路留在里面！

方法问题

  • 我上面的答案展示了一种更好的方法来禁用表单提交。您不应该尝试设置和取消设置 onclick 处理程序；相反，您应该处理处理程序本身内部的重复点击。事实上，它可以更简单：如果此表单正常提交而不是通过 JavaScript 验证或通过 AJAX 发送，那么您可以简单地禁用输入而不必担心重新启用它，因为当服务器完成处理表单提交。该页面将消失或使用启用的提交按钮重新加载！
  • 您不应该使用提交按钮上的点击事件来阻止表单提交。为此，表单有一个提交事件。在某些浏览器中可以通过返回键提交表单，这将绕过您的点击事件。您应该订阅表单的提交事件。
  • 您不应该首先使用“onclick”属性来分配事件处理程序。您应该将事件侦听器添加到您的 DOM 元素。这会产生更灵活的事件——例如，您可以将多个事件分配给同一个元素——并更好地处理事件执行的范围。最后，它将文档的表示和行为与其内容分开。这是 jQuery 和其他流行库的做法。我意识到这需要更多的编码，但这就是存在像 jQuery 这样的操作库的原因。你应该试一试！
于 2012-06-26T01:04:52.183 回答
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 秒内没有执行后续代码时才执行后续代码。

于 2012-06-26T01:13:43.040 回答
0

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

您也可能需要设置对象样式以隐藏元素。

于 2014-05-12T17:58:09.190 回答