Bug fixing for my damage per second function - php

Question

I've created a working damage per second loop although it has a few bugs that need to be worked out.
i'd like the 'target has been destroyed' message to be displayed instantly, not 1.2 seconds after the current hitpoints reach 0.
the major bug is that if you click the attack button multiple times, it will initiate the setInterval multiple times and the damage will be inflicted every 1.2 seconds for every time you clicked it, so it can execute multiple times.
The initial attack should happen instantly.
Any thoughts or ideas? I have tried the using a do while loop but i couldn't get that code to work at all. I've only had success with the setInterval function.
I have a working script on my website and i'll post the code here as well.
$(document).ready(function(){
var dmg = 60;
var curr_hp = 1200;
var tot_hp = 1200;
$('#attk_spd').html('1.2 seconds');
$('#dmg').html('60'); $('#curr_hp').html('1200');
$('#tot_hp').html('1200');
$("#btn").click(function(){
$('#attk').html('You are currently attacking your target.');
setInterval(
function () {
if (curr_hp > 0) {
curr_hp = curr_hp - dmg;
$('#curr_hp').html(curr_hp);
} else { $('#attk').html('Your target has been destroyed.');
}
},
1200);
})
});
And here's the current working version in action:
http://www.evenstar-online.com/Jquery_snippets/dpsloop.php

Answer 1

Use setTimeout instead of setInterval, so you can control precisely whether to attack again. Then you can just call the function once and the first attack happens immediately. This is a little weird to explain; follow the code below :)
Also:
Taking care to indent your code correctly makes it much easier to follow at a glance :)
Don't use $.html unless you're actually assigning HTML! Get in the habit of using $.text instead, or you'll end up trying to stick an angle bracket somewhere and have no idea why all the text disappeared.
I ended up with:
$(document).ready(function(){
var dmg = 60;
var curr_hp = 1200;
var tot_hp = 1200;
$('#attk_spd').text('1.2 seconds');
$('#dmg').text('60');
$('#curr_hp').text('1200');
$('#tot_hp').text('1200');
var attack_timer;
$("#btn").click(function() {
if (attack_timer) {
// We're already waiting for the next attack, so do nothing
return;
}
$('#attk').text('You are currently attacking your target.');
var attack_once = function() {
// Always attack immediately
curr_hp -= dmg;
$('#curr_hp').text(curr_hp);
// Only schedule another attack if the target is still alive
if (curr_hp > 0) {
attack_timer = setTimeout(attack_once, 1200);
}
else {
$('#attk').text('Your target has been destroyed.');
}
};
attack_once();
})
});