Question

I am having a terrible time figuring this one out. I have a form.

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

I have a function I need executed on submit: ycClick();

Once ycClick() is executed I need to toggle onClick to null for 30 seconds, then toggle back so that if pressed again after 30s it will execute ycClick() a second time,then disable it for another 30s, and so forth. I’ve tried this 100 different ways but this is what I’ve got now:

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

Then I’ve got onclick set to trigger timer();
As is, this sets off timer(), which sets off ycClick() and then toggles onclick to null, but does not toggle it back after 30 seconds. I suspect it has something to do with this line:

isEnabled = !isEnabled;

but removing made no difference, it still operates exactly the same.

Answer 1

You could do this:

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

    // the actual code of the function
}

Live demo: http://jsfiddle.net/znKRC/7/

In my demo, click on the button repeatedly, and you’ll notice that the second part of the function is only executed every 3 seconds. So, the first three lines of the function above make sure that the subsequent code is only executed if it has not been executed in the last 30 seconds.