僅在執行第一種方法后如何執行第二種方法

Question

我只想在加載段落標簽后才打印標題標簽。 以下是我的Javascript代碼。 有關更多說明，請參閱插件： http ://embed.plnkr.co/aheHkSQUBft5A4Z3wkie/preview

function changeText(cont1, cont2, speed){
    var Otext = cont1.text();
    var Ocontent = Otext.split("");
    var i = 0;

    function show() {
        if (i < Ocontent.length) {      
            cont2.append(Ocontent[i]);
            i = i + 1;
        };
    };

    var Otimer = setInterval(show, speed);  
};

$(document).ready(function() {
    changeText($("p"), $(".p2"), 30);
    clearInterval(Otimer);
});

$(document).ready(function() {
    changeText($("h2"), $(".h2"), 30);
    clearInterval(Otimer);
});

Answer 1

我會做這樣的事情（請注意Internet Explorer不支持ES6 Promises，但也有一些墊片也可以在舊的瀏覽器中使用Promises）。

您必須填寫注釋的部分才能使其正常運行：

var Otimer;

/*@TODO: refactor show() function to use ES6 Promises (eventually with shims) */
function show(Ocontent) {
    var i = 0;

    if (i < Ocontent.length) {
        cont2.append(Ocontent[i]);
        i = i + 1;
    };

    if (Otimer === undefined) {
        Otimer = setInterval(show, speed); // Remember to fulfill the promise and remove the interval once it's finished
    }

    // return the promise
};

function changeText(p1, p2, speed) {
    var Otext = p1.text();
    var Ocontent = Otext.split("");

    return show(Ocontent);
};

$(function () {
    changeText($("p"), $(".p2"), 30).then(function() { // We call changeText the second time after the  promise return by changeText() is fulfilled and the show() function has finished
        Otimer = undefined;
        changeText($("h2"), $(".h2"), 30);
    });
});

Answer 2

首先，聲明函數內部的變量是作用域變量，您不能從函數外部訪問該變量。 所以這行clearInterval(Otimer); 永遠行不通。

下面的代碼是范圍問題的固定代碼，並使用回調實現所需的代碼。

function changeText(cont1, cont2, speed, cb) {
  var Otext = cont1.text();
  var Ocontent = Otext.split("");
  var i = 0;

  function show() {
    if (i < Ocontent.length) {
      cont2.append(Ocontent[i]);
      i++;
    }else{
      clearInterval(Otimer)
      if(cb) cb()
    }
  };
  var Otimer = setInterval(show, speed);
};

$(document).ready(function() {
  changeText($("p"), $(".p2"), 30, function(){
    changeText($("h2"), $(".h2"), 30);
  });
});

http://plnkr.co/edit/xowItFUWqI79obi4ZVNV?p=preview