Как я могу связать таймер с бесконечными циклами в jQuery? - PullRequest
Новая
       29

Как я могу связать таймер с бесконечными циклами в jQuery?

3 голосов
/ 29 марта 2012

Я пытаюсь построить индикатор прогресса, связанный с таймером.Например, каждая секунда добавляет 1% к ширине полосы.Сейчас я перехожу к той части, где я могу нажать кнопку, и она начинает прогрессировать, но это чисто произвольно.Как я могу получить какой-то бесконечный цикл с jQuery для обновления бара после каждой секунды?Другой вопрос, может быть, более простой?Как я могу использовать кнопку, чтобы остановить прогрессирование бара?

Два вопроса 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Fancy Timer </title>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <script type="text/javascript" src="javascript/jquery-1.7.2.js"></script>  
</head>



<body>


<script type="text/javascript">
$(document).ready( function ( $ ) {
    last=$('ul.events li:last div').css('border', '1px solid red');


    function foo(e) {
        setTimeout(function() {last.animate({"width":"+=5%"})} , 1000); // delays 1.5 sec
        setTimeout(function() {last.animate({"width":"+=5%"})} , 1000); // delays 1.5 sec
        setTimeout(function() {last.animate({"width":"+=5%"})} , 1000); // delays 1.5 sec
        setTimeout(function() {last.animate({"width":"+=5%"})} , 1000); // delays 1.5 sec
        setTimeout(function() {last.animate({"width":"+=5%"})} , 1000); // delays 1.5 sec
        setTimeout(function() {last.animate({"width":"+=5%"})} , 1000); // delays 1.5 sec
        setTimeout(function() {last.animate({"width":"+=5%"})} , 1000); // delays 1.5 sec
        setTimeout(function() {last.animate({"width":"+=5%"})} , 1000); // delays 1.5 sec
    };

    $("#timer").bind({
      'click': foo,
    });




})


</script>


<div id="wrapper">
<a href="#" id="timer">START</a>

    <ul class="events">
        <!-- <li style="width: 42.48%; left: 57.2%;">Design &amp; Typography <em>(2007 - 2009)</em></li> -->
        <li><div class="bar" style="width: 30%; left: 0;">Drawing &amp; Illustration <em>(2003 - 2009)</em></div> </li>
        <li><div class="bar" style="width: 55%; left: 0;">Drawing &amp; Illustration <em>(2003 - 2009)</em></div></li>
        <li><div class="bar" style="width: 45%; left: 0;">Drawing &amp; Illustration <em>(2003 - 2009)</em></div></li>
        <li><div class="bar" style="width: 10%; left: 0;">Drawing </div></li>
    </ul> <!-- end .events -->
</div>



</body>
</html>

Ответы [ 3 ]

9 голосов
/ 29 марта 2012

Звучит так, будто вы ищете setInterval . 

var timerId = setInterval(function() {
    // code you want to execute every second here
}, 1000);
// 1 second = 1000 milliseconds.

Тогда, когда вы больше не хотите, чтобы код запускался каждую секунду, вы можете сделать: 

clearInterval(timerId);
1 голос
/ 29 марта 2012 
function doTimeout() {
  // do stuff
  if (!complete) {
    setTimeout(doTimeout, 1000);
  }
}

// call it for the first time
setTimeout(doTimeout, 1000);

в качестве альтернативы, проверьте setInterval ()

1 голос
/ 29 марта 2012

Прежде всего, вы должны использовать для этого индикатор выполнения jQuery UI. Это упростит вам вещи. Во-вторых, вы можете просто сделать так, чтобы таймер продолжал сбрасываться и вызываться сам, пока некоторая переменная не достигнет 100. Это очень распространенный шаблон для таймеров JS.

...