2015-11-08 169 views
2

我想在加載段落標記後纔打印標題標記。以下是我的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); 
}); 
+0

FYI有沒有需要兩個'document.ready'處理程序 - 在一個加入兩個代碼塊。 –

+1

@ chetan:打開Web控制檯,它提供了重要的信息。 –

+1

@chetan,你可以試試這個回調函數。另外,如果你只使用'Otimer',你可以使用'setTimeout'。 – Rajesh

回答

0

我會做這樣的事情(請不是ES6承諾不通過Internet Explorer支持,但也有墊片使用與舊的瀏覽器承諾過)。

你必須填寫註釋的部分得到它的工作雖然:

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); 
    }); 
}); 
0

首先,變量的函數內聲明的範圍的變量,你不能從功能的外部訪問。 所以行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

相關問題