Log in

View Full Version : how to stop a javascript function from running? i include my example here.


smansakra
12-24-2008, 06:50 AM
hello...

i have a function that running on my own site, i can create a function , but i'm not able to stop it,
please my example below...


<html>
<head>
<title>percobaan
</title>
<script type="text/javascript">

function alertku(opt){
if(opt=="run"){
var t = document.getElementById('alertku').innerHTML+="run ,";

setTimeout("alertku('run')",1000);
}
else if(opt=="stop") {return false;}
}
</script>
</head>
<body>
<input type="button" value="RUN" onclick="alertku('run');"> <input type="button" value="STOP" onclick="alertku('stop');"><br>

<span id="alertku">hum </span>
</body>
</html>

please, when i click stop, the function is still running....
can anyone help? :confused::(
smansakra
12-24-2008, 07:35 AM
hi, i have done!

use clear timeout to stop this...!

function alertku(opt){
if(opt=="run"){
var t = document.getElementById('alertku').innerHTML+="run ,";
exe = setTimeout("alertku('run')",1000);
}
else if(opt=="stop") {
exe = clearTimeout(exe);

}
}
jscheuer1
12-24-2008, 02:39 PM
A better way:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Alertku - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function alertku(){
if(alertku.opt){
document.getElementById('alertku_span').firstChild.nodeValue += ', run';
setTimeout(alertku, 1000);
}
};
</script>
</head>
<body>
<div>
<input type="button" value="RUN" onclick="alertku.opt = true; alertku();">
<input type="button" value="STOP" onclick="alertku.opt = false;"><br>
<span id="alertku_span">hum</span>
</div>
</body>
</html>
Twey
12-29-2008, 12:20 AM
A better way:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Page Without Title</title>
<script type="text/javascript">
var Alertku = (function() {
var tid;

function start() {
if (!tid)
tid = setInterval((function(f) { f(); return f; })(tick), 1000);
}

function tick() {
var el = document.getElementById('alertku_span');

(el.firstChild || el.appendChild(document.createTextNode(""))).nodeValue += ', run';
}

function stop() {
if (tid)
clearInterval(tid);

tid = null;
}

return { start: start,
stop: stop };
})();
</script>
</head>
<body>
<div>
<input type="button" value="RUN" onclick="Alertku.start();">
<input type="button" value="STOP" onclick="Alertku.stop();">
<span id="alertku_span">hum</span>
</div>
</body>
</html>John, beware that presentational <br>.
jscheuer1
12-29-2008, 03:54 AM
John, beware that presentational <br>.

Valid strict as used in my code, harms nothing that I can see, please elaborate. Unless you mean just in general. If that's what you are getting at, with such short lines (as in this case), I consider it acceptable.

Breaking long lines with a <br> is stupid though, because one never knows how they will otherwise layout in the viewport.
Twey
12-29-2008, 07:47 AM
Valid, yes, but used presentationally. It's on the same order as tables for layout. Properly, it should be written using CSS display: block; or so.

Here's an abstraction of this behaviour:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Page Without Title</title>
<script type="text/javascript">
function Service(f, opts) {
this.tid = null;
this.f = f;
this.interval = opts.interval || 1000;
this.init = opts.init || Service.NONE_FUNCTION;
this.final = opts.final || Service.NONE_FUNCTION;
this.stopCond = opts.stopCond || Service.NONE_FUNCTION;
}

Service.prototype = {
start: function() {
if (!this.tid) {
this.init();
this.tick();
this.tid = setInterval(function() { this.tick(); }, this.interval);
}
},

tick: function() {
if (this.stopCond())
this.stop();
else
this.f();
},

stop: function() {
if (this.tid && !this.final) {
clearInterval(this.tid);
this.tid = null;
}
}
};

Service.NONE_FUNCTION = function() { return false; };

function alertku() {
var el = document.getElementById('alertku_span');

(el.firstChild || el.appendChild(document.createTextNode(""))).nodeValue += ', run';
}

var sAlertku = new Service(alertku);
</script>
</head>
<body>
<div>
<input type="button" value="RUN" onclick="sAlertku.start();">
<input type="button" value="STOP" onclick="sAlertku.stop();">
<span id="alertku_span">hum</span>
</div>
</body>
</html>