JavaScriptコードのセクションを特定の時間実行するにはどうすればよいですか？

Question

document.getElementById("myLinkID").onclick = '';のコードを10秒間実行するにはどうすればよいですか？ JavascriptはCSSアニメーションを10秒間実行し、アニメーションが終了するまでコードを再実行したくありません。どんな助けでも大歓迎です。

function myFuction() { 

    var myVar = document.getElementById('myDivID'); 

    if (myVar.style.display === 'none') { 
    myVar.style.display = 'block'; 
    document.getElementById('myLinkID').onclick = ''; 
    } 

    else { 
    myVar.style.display = 'none'; 
    } 
} 

私は以下を試しましたが、ただ凍結します。

function myFunction() { 

    var myVar = document.getElementById('myDivID'); 
    var myVar2 = true; 

    while (myVar2) { 
    document.getElementById('myLinkID').onclick = ''; 
    } 

    setTimeout(function myFunction() { 
    myVar2 = false; 
    }, 10000); 

    if (myVar.style.display === 'none') { 
    myVar.style.display = 'block'; 

    } else { 
    myVar.style.display = 'none'; 
    } 
} 

アップデートは、固定された：

function myFuction() { 

    var myVar = document.getElementById('myDivID'); 

    setTimeout(function() { 
    myVar.style.display = 'none'; 
    document.getElementById('myLinkID').onclick = myFunction; 
    }, 10000); 

    if (myVar.style.display === 'none') { 
    myVar.style.display = 'block'; 
    document.getElementById('myLinkID').onclick = ''; 
    } 

    else { 
    myVar.style.display = 'none'; 
    } 
} 

Answer 1

を実行しているかどうかを判断するためにwebkitAnimationEndイベントを試してみてください。 onclickを空の文字列に設定すると、再度変更するまでは何も行われません。したがって、そのステートメントを1回実行してから、アニメーションが終了したらonclickハンドラを復元するために10秒間のタイムアウトを設定します。

Answer 2

は、この関数はループ内でdocument.getElementById("myLinkID").onclick = '';を実行する必要はありません