每個李應用功能與純的js

Question

我做了一個功能，讀出利用，我有這樣的

<ul id="news"> 
    <li> 
How Instagram Is Winning Gold at the 2012 Olympics [INFOGRAPHIC] 
    </li><li> 
     Flickr Photo of Insect Identified As Never-Before-Seen Species [VIDEO] 
    </li><li> 
     The Upside to the End of the Olympics [COMIC] 
    </li><li> 
     40 Digital Media Resources You May Have Missed 
    </li><li> 
     19 Resources to Improve Your Photo and Video Skills 
    </li><li> 
     Top 10 Twitter Pics of the Week 
    </li><li> 
     Can Employees Be Trusted to Work From Home? [INFOGRAPHIC] 
    </li><li> 
     Capture Ghosts at Foursquare Spots With ‘Ghostbusters’ iOS Game 
    </li><li> 
     Dog Is Terrified of Low-Fat Lamb Jerky [VIDEO] 
    </li><li> 
     5 Tips to Take Food Photos Good Enough to Eat 
    </li><li> 
     The 10 Most Stunning Images of Mars in History 
    </li><li> 
     The Many Looks of Spiderman Over the Past 50 Years [INFOGRAPHIC] 
    </li><li> 
     Top Ten GIFs of the Week 
    </li><li> 
     Romney and Obama Both Called Their Veeps the ‘Next President’ [VIDEO] 
    </li><li> 
     Paul Ryan Visited Facebook, Met Zuckerberg [PICS] 
    </li><li> 
     Romney’s Logo Looks Like Toothpaste [PICS] 
    </li><li> 
     Paul Ryan, Romney’s VP Pick, Has Sizable Online Presence 
    </li><li> 
     Get Back in Kitchen With This Specialized Recipe Site 
    </li> 

</ul> 

的新聞列表，現在語音API的一個元素的含量正在讀出文本使用這個功能。

function speak() { 
    //speechapi.speak(document.getElementById('start').innerHTML,"male"); 
    speechapi.speak(document.getElementById('start').innerHTML,"male"); 

} 

我該如何讓它每隔一小段間隔讀取一次？我不想使用jquery或類似的。 但我無法做到。

Answer 1

下面是做這件事的一種方式，以每間2秒延遲行：

var news = document.getElementById('news').getElementsByTagName('li'); 

var newsItem = 0; 
var speechInterval = setInterval(function(){ 
    speechapi.speak(news[newsItem].innerHTML, "male"); 
    if (++newsItem === news.length){ 
     window.clearInterval(speechInterval); 
    } 
}​, 2000); 

DEMO, inserting text in a <p> tag instead of speaking it

Answer 2

如何

function speak() { 
    var i = 0, 
    li = document.getElementById('news').getElementsByTagName('li'), 
    interval = setInterval(function(){ 
     if (i < li.lenght){ 
      speechapi.speak(li[i].innerHTML,"male"); 
      i++; 
     } 
     else{ 
      clearInterval(interval); 
     } 
    }, 5000); 
} 

https://developer.mozilla.org/en-US/docs/DOM/document.getElementsByTagName

https://developer.mozilla.org/en-US/docs/DOM/document.getElementById

https://developer.mozilla.org/en-US/docs/window.setInterval

https://developer.mozilla.org/en/DOM/window.clearInterval

Answer 3

這裏是我採取的問題：

function speak() { 
    var li = document.getElementById ('news').getElementsByTagName ('li') 
     , i = 0; 

    li = [].slice.call (li, 0); 

    (function speakItem() { 
     speechapi.speak(li[i++].innerHTML, "male"); 
     i < li.length && window.setTimeout (speakItem, 1000); 
    } 
} 

的[].slice.call (li, 0)轉換li元素，以一個簡單的JS數組的實時列表，從而更高效的處理。

每個項目都被讀取，如果有更多項目，則在開始下一個項目之前會開始1秒的時間間隔。這允許長期和短期的項目之間不斷的間隔。