How to make the function only runs once in javascript
Question
How to make the function only runs once per button?
if clicks in "click me" only works once, and the same for the other buttons Order not to put much code, I put an example..:
http://jsbin.com/apexod/1/watch
<html>
<head>
<title></title>
</head>
<body>
<input type="button" value="click me" onclick="hello()"><br>
<input type="button" value="click me1" onclick="hello()"><br>
<input type="button" value="click me2" onclick="hello()">
<script>
function hello(){
alert("hello");
}
</script>
</body>
</html>
5 answers
solution1
4 2012-12-06 13:58:04
Change your onclick handlers so that the function can reference the element clicked.
<input type="button" value="click me" onclick="hello.call(this)"><br>
<input type="button" value="click me1" onclick="hello.call(this)"><br>
<input type="button" value="click me2" onclick="hello.call(this)">
Then change the function to remove the handler.
function hello(){
alert("hello");
this.onclick = null;
}
solution2
2 ACCPTED 2012-12-06 13:58:08
You can just remove the onclick
<html>
<head>
<title></title>
</head>
<body>
<input type="button" value="click" onclick="hello(this)"><br>
<input type="button" value="click1" onclick="hello(this)"><br>
<input type="button" value="click2" onclick="hello(this)">
<script>
function hello(btn){
alert("hello");
btn.onclick = function(){};
}
</script>
</body>
</html>
solution3
2 2012-12-06 13:59:39
It's easier to manage if you add event listeners in the script (it's also consider good practice to separate behaviour from presentation):
Demo: http://jsfiddle.net/4N4ur/
<input type="button" value="click">
<input type="button" value="click1">
<input type="button" value="click2">
<script>
var inputs = document.getElementsByTagName('input');
for(var i=0; i<inputs.length; i++) {
inputs[i].onclick = function() {
hello();
this.onclick = null; // reset the handler
}
}
function hello() {
alert('hello';
}
</script>
solution4
1 2012-12-06 14:05:27
on click of buttton call the function below with button id or name as param
<script>
function hello(caller){
if (caller == 'button1' && $("#button1clicked").val() != '1')
{
// Your code to execute for the function
alert("hello");
// set value for button1clicked
$("#button1clicked").val("1");
}else {
// do nothing
}
}
</script>
Add the above conditions for no of buttons
solution5
1 2015-10-21 18:44:29
While the above scenario and answers are all very specific to click handlers, the answer to the original question how to make a function that only runs once is generally done using a wrapper function, similar to the UnderscoreJS .once method:
function once(fn) {
var called = false;
return function() {
if (!called) {
called = true;
fn.apply(this, arguments);
}
}
}
The above implementation would only allow the original function to be invoked once, and it would pass through the context and arguments of the later invocation. This would then be used as:
var oneTimeFn = once(function() {
console.log('I was called.');
});
oneTimeFn();
//-> I was called.
oneTimeFn();
//-> undefined
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.