在同一onclick事件中执行两个函数，但只运行一次

Question

我试图获得一个图像来同时运行两个javascript函数，问题是我希望changeImg()函数每次单击都能连续运行，但只执行clock()函数一次。(从而启动计时器(
<img id="emotion" src="Target.jfif" width="50" onclick="changeImg();clock(); this.onclick=null;"/>

这是我的changeImg()脚本：

{
var x = Math.floor(Math.random()*900);
var y = Math.floor(Math.random()*900);

var obj = document.getElementById("emotion");
obj.style.top = x + "px";
obj.style.left = y + "px";

}

这是我的clock()脚本：

function clock() {
myTimer = setInterval(myClock, 1000);
var c = 30;
function myClock() {
document.getElementById("demo").innerHTML = --c;
if (c == 0) {
clearInterval(myTimer);
alert("Reached zero");
}
}
}

Answer 1

让clock()检查计时器是否已设置，然后返回。

function clock() {
if (myTimer) { // clock already started
return;
}
myTimer = setInterval(myClock, 1000);
var c = 30;
function myClock() {
document.getElementById("demo").innerHTML = --c;
if (c == 0) {
clearInterval(myTimer);
alert("Reached zero");
}
}
}

Answer 2

而不是传递null来onclick传递函数changeImg

onclick="changeImg();clock();this.onclick=changeImg;"

我不知道有什么好的做法，但它可以在不改变你的代码太多的情况下工作