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

Я пытаюсь создать полосу прогрессирования, связанную с таймером. Например, каждая секунда добавит 1% к ширине полосы. На данный момент я добираюсь до той части, где я могу нажать кнопку, и она начнет progressing.but это чисто произвольно. Как я могу получить какой-то бесконечный цикл с jquery для обновления панели после каждой секунды? другой вопрос, возможно, более простой? как я могу использовать кнопку, чтобы остановить прогрессию панели?Как я могу связать таймер с бесконечными циклами в 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>

источник

2012-03-29 fenec

JQuery не делает этого JavaScript делает , –

Похоже, что вы ищете setInterval.

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

Затем, когда вы больше не хотите запускать код каждый второй, вы можете сделать:

clearInterval(timerId);

источник

2012-03-29 16:56:45

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

источник

2012-03-29 16:56:09

function doTimeout() { 
    // do stuff 
    if (!complete) { 
    setTimeout(doTimeout, 1000); 
    } 
} 

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

альтернативно, проверить setInterval()

источник

2012-03-29 16:58:43 dontGoPlastic

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

ответ

Смежные вопросы