设置和删除只读JavaScript -无法同时执行这两项操作

Question

这是我第一次尝试JavaScript (学习Java atm)，我几乎完成了。我想做的是:在页面刷新时从我的文本区域中删除readonly，几分钟后使用计时器将其设置为readonly。

所有的计时器、getElement-part和readOnly-attribute似乎都在工作(最终)。

JavaScript：

<script>
//x = Timelimit in minutes, z = Time remaining alert in minutes
function timeLimit(x,z) {
    var min = 60 * 1000;
    var limit = x * min;
    setTimeout(function(){ alert("Du har " + z + " minutter igjen på prøven.") },( limit - (z * min) ));
    setTimeout(function(){ alert(x + " minutter har gått.\nTiden er slutt.") },limit);
    setTimeout(document.getElementById('testroom').setAttribute('readOnly','readOnly'),limit);
}
</script>

下面是对我的函数的调用(把它放在我的文本区域下面，因为这似乎是getElement通过id找到我的文本区域的唯一方法)：

    <form method="post" action="insert.php" />
        <textarea name="content" id="testroom"></textarea><br>
        <input type="submit" value="Send inn for retting" />
    </form>

<script>
timeLimit(0.2,0.1);
document.getElementById('testroom').removeAttribute("readOnly",0);
</script>

如果我把removeAttribute移到timeLimit()上面(或者把它放在函数内部)，我的文本区域将保持为readonly=true。如果我把它放在下面，它将保持readonly=false，即使在12秒之后(0.2分钟，计时器应该发生的时间)。

希望有人能帮我弄清楚这一点，我已经尝试了很多不同的语法。

Answer 1

您的第三个setTimeout()调用没有执行您想要的操作。相反，它会立即执行.setAttribute()方法。您应该将它包装在一个函数中，以便稍后执行。

setTimeout(function(){ alert(x + " minutter har gått.\nTiden er slutt.") },limit);
setTimeout(function(){document.getElementById('testroom').setAttribute('readOnly','readOnly')},limit);

更好的是，您可以将两者结合起来，但请确保将setAttribute调用放在第一位，这样用户就不会在不好的时候偷偷地杀死您的JavaScript：

setTimeout(function(){
    document.getElementById('testroom').setAttribute('readOnly','readOnly');
    alert(x + " minutter har gått.\nTiden er slutt.");
},limit);