jqueryの無限ループでタイマーをリンクするにはどうすればよいですか？

私は、タイマーにリンクされているプログレッションバーを作成しようとしています。たとえば、1秒ごとにバーの幅に1％が追加されます。今のところ、私はボタンをクリックすることができる部分に到達しており、progressing.butこれは純粋に任意です。どのようにjqueryと無限ループのいくつかの種類を取得することができます各秒後にバーを更新する？別の質問が多分もっと基本ですか？どのように私はバーの進行を停止するためにボタンを使用することができますか？jqueryの無限ループでタイマーをリンクするにはどうすればよいですか？

2質問

<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

をしないをチェックアウト。 –

あなたが探しているような音は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);

代わりに、jQueryのはこのJavaScriptはないsetInterval()

出典

2012-03-29 16:58:43 dontGoPlastic

jqueryの無限ループでタイマーをリンクするにはどうすればよいですか？

答えて

関連する問題