javascript动画效果时间间隔

Question

有一个下降的词，我将它的位置（x，y）和它的值存储在不同的数组中，如果我输入特定的词，我会删除三个数组中的所有值。

我把间隔时间设置为800，但问题是删除对应间隔时间的词，而不是立即删除后面的词。

我觉得是因为我的draw()函数在update中，受间隔时间的影响，但是我不知道如何保持所有内容的绘制并在我输入后立即擦除.

var intervalTime = 800;



setInterval(update, intervalTime); //appearance interval

function doKey (keyPressed) {
    if (window.event.keyCode === 13) { //if pressed enter
        var submission = document.getElementById('inputbox').value;
        var result = checkLetter(submission);
        if (result > -1) {
            //value deletion
            alpha.splice(result, 1);
            //positions deletion
            listx.splice(result, 1);
            listy.splice(result, 1);
            increaseScore('score');
        } else {
            console.log("this is an error");
        }
    document.getElementById('inputbox').value = ''; //return to the first step
    }
}

function draw() {
    for (i = 0; i < alpha.length; i++) {
        listy[i] += spdY;
        ctx.fillText(alpha[i],listx[i],listy[i]);
    }
}

function update() {
    if (document.getElementById('life').innerHTML == 0) {
        alpha = []
        listx = []
        listy = []
        console.log("fail");
        endoftheGame();
    } else {
        increaseLevel();
        //console.log(alpha);
        //console.log(listx);
        //console.log(listy);
        spdY = 50 + 5*(document.getElementById('score').innerHTML/10);//speed
        lifeDeduction()
        getLetter();
        ctx.clearRect(0,0,500,500);
        draw();
    }
}

Answer 1

您可以从 doKey() 函数调用您的 draw() 函数，并在它之前调用 ctx.clearRect(0,0,500,500); 来重绘屏幕。这样您的屏幕会立即更新，但 update() 函数的其他部分不会执行。

javascript动画效果时间间隔

javascript animation effect time interval

javascript

intervals