Question

我想在加载段落标记后才打印标题标记。以下是我的Javascript代码。有关更多说明，请参阅plunker：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

首先，函数内部的变量声明是作用域变量，您无法从函数外部进行访问。所以行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); }); });永远不会有效。

下面的代码是范围问题的固定代码，并使用回调来实现您想要的内容。

   $('#test').hide();

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

如何在执行第一个方法后才执行第二个方法

2 个答案: