.fadeIn .fadeOut 导致数组索引的奇怪行为答案

【问题标题】：.fadeIn .fadeOut causes strange behaviour with array index.fadeIn .fadeOut 导致数组索引的奇怪行为
【发布时间】：2015-03-09 23:20:55
【问题描述】：

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

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>

【问题讨论】：

在淡出回调中移动currentQuestionIndex = currentQuestionIndex+1; questionTimer(); ;)

标签： javascript jquery arrays settimeout

【解决方案1】：

当文本尚未淡出时，您正在执行 +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>

【讨论】：

【解决方案2】：

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

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

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>

【讨论】：

【解决方案3】：

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

与您等到fadeOut 完成后执行fadeIn 的方式相同，您必须等到fadeIn 完成后才能增加计数器的值。

轻松解决

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>

【讨论】：