web-dev-qa-db-ja.com

jQueryの時間間隔で関数を実行する

JQueryを使ってバナーを作りたいです。ページが読み込まれたときに、写真のグループが1つずつ表示されます。たとえば、コントローラーは10枚の写真を送信し、各写真は10分後に30秒後に表示され、スクリプトはコントローラーに別の写真を要求します。

問題は、30秒で実行される関数を作成するにはどうすればよいかです。ボタンをクリックするなどの操作を行わずに、一定の間隔で関数を実行する必要があります。

jqueryintervals
17
Sesen

主な方法は次のとおりです。

 setInterval(function () {
        console.log('it works' + new Date());
    },30000);

今後間隔をクリアする必要がある場合：

var myInterval = setInterval(function () {
            console.log('it works' + new Date());
        },30000);

将来は：

clearInterval(myInterval);
45
Roki

次のようなものを試してください：

HTML：

<ul id="ticker">
    <li>Image 1</li>
    <li>Image 2</li>
    <li>Image 3</li>
    <li>Image 4</li>
    <li>Image 5</li>
</ul>​

CSS：

ul{height:20px; overflow:auto}​

JS：

var $ticker = $('ul#ticker');
var speed = 300;
var pause = 3000;

var tick = function () {
    var first = $ticker.find('li').first().animate({
        height: 0
    }, speed).hide('normal', function() {
        $(this).remove();
        $ticker.append('<li>' + first + '</li>');
    }).html();
};

$('ul#ticker').click(tick);
setInterval(tick, pause);

ここでは、単純なデモです。

4
yckart

JavaScriptは setTimeout function を提供します：

var timeoutID = window.setTimeout(code, delay);
0
BnW