javascript - 只在javascript中执行setInterval函数

Question

var intervalHandle ;
var currentOpacity=0;

function beginAnimate() {
    current_question_div = document.getElementById(current_question);
    intervalHandle = setInterval(function(){
        animateBox(current_question_div)
    }, 200);
    alert("Hellow ashik !");
}

function animateBox(current_question_div) {
    current_question_div.style.backgroundColor = "lightblue"; 
    currentOpacity = currentOpacity + .091; 
    current_question_div.style.opacity = currentOpacity; 
    if(currentOpacity > 1) {     
        alert("END");
        clearInterval(intervalHandle);
    }
}

<P onclick="beginAnimate">Click</p>

一切正常，但 alert("Hellow ashik !"); 在执行间隔时工作。我想在发生 clearInterval 时打开 alert("Hellow ashik !") 。意味着现在其他 JavaScript 代码正在并行执行，同时 Interval 也在执行。我一次只需要执行一个线程。请帮忙。有没有办法一个接一个地执行这段代码。谢谢。

Answer 1

这段代码应该完成你想要的:

var intervalHandle,
    currentOpacity = 0;

function beginAnimate() 
{
    current_question_div=document.getElementById(current_question);

    /* call any other functions that need to run before the animation starts here */
    alert("Hellow ashik !");

    intervalHandle = setInterval(function(){ 
        // note 'endAnimate()' is passed to the 'animateBox()' function as a callback
        animateBox(current_question_div, endAnimate)
    }, 200);

    /* call any functions that can run while the animation is running here */
}

function endAnimate() {
    alert("The end!");
    /* call any other functions that need to be run after the animation here */
}

function animateBox(current_question_div, callback) {
    current_question_div.style.backgroundColor = "lightblue";
    currentOpacity = currentOpacity + .091;
    current_question_div.style.opacity = currentOpacity;

    if(currentOpacity>1)
    {     
        alert("END");
        clearInterval(intervalHandle);
        if (callback && typeof(callback) === 'function') {
            callback();
        }
    }
}

<P onclick="beginAnimate">Click</p>

JavaScript 是一种单线程语言——忽略 WebWorkers 或其他解决方法。然而，它是异步的，因此您经常会看到看起来像线程的行为。解决这些问题的一种方法是使用 callback pattern .

在回调模式中，您传递一个稍后在异步函数完成时调用的函数。 JavaScript 使这一切变得简单，因为函数是一流的对象，可以像数字一样轻松地传递或分配。