.fadeIn .fadeOut 导致数组索引出现奇怪的行为

Question

我有以下代码来显示数组中特定索引处的字符串。每次调用该函数并显示一个新字符串时，索引都会递增：

var questions = ["What is your name?","What is your favourite colour?","What is the air speed velocity of an unladen swallow?"];
var currentQuestionIndex = 0;

function showQuestion() {
    
    if (currentQuestionIndex <= questions.length-1) {
        
        var question = $('#question');
            console.log(questions[currentQuestionIndex]);
            question.text(questions[currentQuestionIndex]);
        
        currentQuestionIndex = currentQuestionIndex+1;

        questionTimer();
    } else {
        console.log("End question 1");
    }
}

function questionTimer() {
    setTimeout(function () {
        showQuestion();
    }, 3000);
}

showQuestion();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="question"></div>

这很好用，但是当我尝试淡出/淡入问题 div 时，代码不再正常工作并且显示索引 1 处的字符串而不是 0。谁能解释为什么？

非工作版本：

var questions = ["What is your name?","What is your favourite colour?","What is the air speed velocity of an unladen swallow?"];
var currentQuestionIndex = 0;

function showQuestion() {
    
    if (currentQuestionIndex <= questions.length-1) {
        
        var question = $('#question');
        question.fadeOut(400, function () {
            question.text(questions[currentQuestionIndex]);
            question.fadeIn(400);
        });
        
        currentQuestionIndex = currentQuestionIndex+1;

        questionTimer();
    } else {
        console.log("End question 1");
    }
}

function questionTimer() {
    setTimeout(function () {
        showQuestion();
    }, 3000);
}

showQuestion();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="question"></div>

Answer 1

那是因为动画是异步的。增加变量的代码将运行放在设置文本的代码之前。

改为增加设置文本的代码中的变量：

var question = $('#question');
question.fadeOut(400, function () {
    question.text(questions[currentQuestionIndex]);
    currentQuestionIndex = currentQuestionIndex+1;
    question.fadeIn(400);
});

演示：

    var questions = ["What is your name?","What is your favourite colour?","What is the air speed velocity of an unladen swallow?"];
    var currentQuestionIndex = 0;

    function showQuestion() {
        
        if (currentQuestionIndex <= questions.length-1) {
            
            var question = $('#question');
            question.fadeOut(400, function () {
                question.text(questions[currentQuestionIndex]);
                currentQuestionIndex = currentQuestionIndex+1;
                question.fadeIn(400);
            });

            questionTimer();
        } else {
            console.log("End question 1");
        }
    }

    function questionTimer() {
        setTimeout(function () {
            showQuestion();
        }, 3000);
    }

    showQuestion();

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

    <div id="question"></div>

Answer 2

当文本尚未淡出时，您正在进行 +1。要解决这个问题，请将所有内容移动到 fadeOut() 回调中：

var questions = ["Question 1","Question 2","Question 3","Question 4"];
var currentQuestionIndex = 0;

function showQuestion() {
    
    if (currentQuestionIndex <= questions.length-1) {
        
        var question = $('#question');
        question.fadeOut(400, function () {
            question.text(questions[currentQuestionIndex]);
            question.fadeIn(400);
            currentQuestionIndex = currentQuestionIndex+1;
            questionTimer();
        });
    } else {
        console.log("End question 1");
    }
}

function questionTimer() {
    setTimeout(function () {
        showQuestion();
    }, 3000);
}

showQuestion();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="question"></div>

Answer 3

问题是你假设线程将停止执行并等待直到效果完成才能继续下一句。那是不正确的。效果是运行异步的，所以当它淡入时，你正在增加计数器，所以当它准备好淡出时，计数器已经增加了 1。

与等到淡出完成再进行淡入的方法相同，您必须等到淡入完成才能增加计数器的值。

轻松修复

var questions = ["Question 1","Question 2","Question 3","Question 4"];
var currentQuestionIndex = 0;

function showQuestion() {
    
    if (currentQuestionIndex <= questions.length-1) {
        
        var question = $('#question');
        question.fadeOut(400, function () {
            question.text(questions[currentQuestionIndex]);
            question.fadeIn(400,  function() {
              currentQuestionIndex = currentQuestionIndex+1;                       
              questionTimer();});
        });

       //move these two inside the callback for fadeIn
       //currentQuestionIndex = currentQuestionIndex+1;                       
       //questionTimer();
    } else {
        console.log("End question 1");
    }
}

function questionTimer() {
    setTimeout(function () {
        showQuestion();
    }, 3000);
}

showQuestion();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="question"></div>

.fadeIn .fadeOut 导致数组索引出现奇怪的行为

.fadeIn .fadeOut causes strange behaviour with array index

javascript

arrays

jquery

settimeout