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 !");在间隔执行时工作。我想在alert("Hellow ashik !")发生clearInterval时打开{{1}}。现在意味着其他JavaScript代码并行执行，而间隔也在执行。我需要一次只执行一个线程。请帮忙。有没有办法逐个执行此代码。感谢。

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使这一点变得简单，因为函数是第一类对象，可以像数字一样轻松地传递或分配。

Answer 2

在浏览器中，javaScript具有单线程特性，因此它在每个窗口的单个线程上执行。这意味着执行图是一维的：javaScript一次只能执行一段代码。

浏览器是事件驱动的。大多数事件都是异步的，例如鼠标点击，按键和timers。它们仅在执行中有空缺时运行;与此同时，他们被迫进入事件队列等待执行。

<p id="test"></p>

document.getElementById("test").innerHTML += "a";

var intervalHandle = setInterval(function(){
    callback();
}, 200);

document.getElementById("test").innerHTML += "c";

function callback() {
    document.getElementById("test").innerHTML += "b";  
    //here where should be located all the code supposed to be executed after the timeinterval.
    clearInterval(intervalHandle);
    //here where should be located all the code supposed to be executed after the clearInterval.
}

检查此链接jsfiddle以查看工作示例。

在上面的示例中，javascript线程开始将p的内容设置为＆＃34; a＆＃34;，然后延迟回调的执行。这将在200ms后的最近计时器刻度上转到事件队列。然后继续执行，将p的内容设置为＆＃34; c＆＃34;。

因此，如果要在clearInterval之后执行某些操作，则应将其放在clearInterval之后。

希望它有用！

只在javascript中执行setInterval函数

2 个答案: