防止计时器运行两次

Question

我有一个由＆＃34; onclick＆＃34;激活的功能。元件。

问题是防止重复，当我点击多次＆＃34; onclick事件＆＃34;运行此功能的速度越来越快。

我需要阻止此功能的第二次运行。 （onclick事件是从AJAX div调用的，不能是脚本，只有在这个函数中）。

<script>
    function attack(target,carrier) {            
        document.getElementById(carrier).style.display = "block";

        var flighttime = 0,
            waytime = 10000,
            repeat = 50,
            loops = 0,
            xspeed = 2,
            yspeed = 3,
            maxloops = waytime/repeat;

        function repeat_targeting() {
            timer = setTimeout( repeat_targeting, repeat);

            flighttime = flighttime + repeat;
            loops = loops + 1;

            var starty = screen.width / 2,
                startx = screen.height / 2,
                x = document.getElementById(target).offsetTop-0,
                y = document.getElementById(target).offsetLeft-0,
                x1 = document.getElementById(carrier).offsetTop,
                y1 = document.getElementById(carrier).offsetLeft;

            if (x > x1) {document.getElementById(carrier).style.top = x1+xspeed+"px";};
            if (x < x1) {document.getElementById(carrier).style.top = x1-xspeed+"px";};
            if (y > y1) {document.getElementById(carrier).style.left = y1+yspeed+"px";};
            if (y < y1) {document.getElementById(carrier).style.left = y1-yspeed+"px";};

            if ( ((x-x1) < 5) && ((x1-x) < 5) && ((y1-y) < 5) && ((y-y1) < 5) ) {  //hit
                document.getElementById(target).className = document.getElementById(target).className + " targeted";
                //document.getElementById(carrier).style.left = "50%";
                //document.getElementById(carrier).style.top = "50%";
                //document.getElementById(carrier).style.opacity = "0";

                stop();

                showB2B('base=<?php echo $_basic['baseid'] ?>');
            }

            if (loops >= maxloops) { // if reached time
                stop();
            }
        }; //repeat

        function stop() {
            clearTimeout(timer);
        };

        repeat_targeting();
    }; 


 </script>

   <div id="someidforHTTPrequest"> // this div content is generated by ajax call on page load
     <button onclick="attack('base-<?php echo $base['id'] ?>','targeter')">lock</button>
   </div>

Answer 1

有几种方法可以解决这个问题：

删除onclick eventlistener

在onclick中，您可以使用this将按钮传递给您的功能。

在html中：

<button onclick="attack(1, 2, this);">lock</button>

然后你可以删除函数中的onclick

在javascript中：

function attack(target, carrier, button) {
    button.onclick = null;
    alert('clicked');
}

http://jsfiddle.net/Ts5y6/

自我毁灭一个使用功能

或者您可以使用自毁功能：

var attack = function (target, carrier) {
    window.attack = null;
    alert('clicked');
}

http://jsfiddle.net/Ts5y6/1/

将单个信号量包装在隐藏范围

中

(function(){
var timer = false; // singleton curried into window.attack, hidden from all other scopes.
window.attack = function () {
    if (timer) return false;
    timer = true; // lock 
    var count = 10;
    var countdown = function () {
        if (count === 0) { // the halting condition
            clearInterval(timer);
            timer = false; // release lock
        }
        document.getElementById('countdown').innerHTML = count--;
    }
    timer = setInterval(countdown, 1000);
}
}());

http://jsfiddle.net/Ts5y6/2/

Answer 2

您可以使用＆＃39;计时器＆＃39;变量作为标志。做：

function attack(target,carrier) {
 if(timer)
  return;
 ...

并清除＆＃39;计时器＆＃39;在停止：

function stop() {
 clearTimeout(timer);
 timer = null;
};