4

特定の時間間隔に基づいてページを変更しようとしています。setTimeoutを使用してみましたが、指定された時間に関係なく、すぐにコードが実行されます。これがページです：

<!DOCTYPE HTML>
<html>
    <head>
        <meta name="viewport" content="width=320; user-scalable=no" />
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <title>Change Page</title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script type="text/javascript">
            var oCSS = {
                'font-size' : '18em',
                'height' : '300px',
                'border' : 'thick solid',
                'text-align' : 'center'
            };

            $(document).bind("mobileinit", function()
            {
                $.mobile.defaultPageTransition = "flip";
            });
            $('div[data-role|="page"]').live('pageshow', function(event)
            {
                setTimeout($.mobile.changePage($($(this).attr('NextPage'))), 30000);
            });
        </script>

        <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
    </head>
<body>
    <div data-role="page" id="page1" NextPage='#page2'>
        <div data-role="content">
            <div class="number">4</div>
        </div>
    </div>

    <div data-role="page" id="page2" NextPage='#page3'>
        <div data-role="content">
            <div class='number'>3</div>
        </div>
    </div>

    <div data-role="page" id="page3" NextPage='#page4'>
        <div data-role="content">
            <div class='number'>2</div>
        </div>
    </div>

    <div data-role="page" id="page4" NextPage='#page1'>
        <div data-role="content">
            <div class='number'>1</div>
        </div>
    </div>

    <script type="text/javascript">
        $(".number").css(oCSS);
    </script>
</body>
</html>
4

2 に答える 2

11

構文が正しくありません。匿名関数を使用する必要があります。そうしないと、JSがすぐに呼び出されます。さらに、jQueryも正しくないようです（1つ多すぎます$()）。そのはず：

$('div[data-role|="page"]').live('pageshow', function(event)
{
    // Retrieve attribute of element to be passed to anonymous function
    var functionParam = $(this).attr('NextPage')

    setTimeout(function() {
        // Pass functionParam to function - $(this) will 
        // be out of scope when the function is called
        $.mobile.changePage(functionParam)
    }, 30000);​
});

詳細については、window.setTimeoutドキュメントを参照してください。

于 2012-05-01T11:37:32.017 に答える
1

への参照$(this)は機能しません (無名関数のこれはDOMWindow Exampleになります) ではsetTimeout()、関数が正しく動作するように変数をキャプチャする必要があります。

$('div[data-role|="page"]').live('pageshow', function(event){
  var nextPage = $($(this).attr('NextPage'));
  setTimeout(function(){
    $.mobile.changePage(nextPage);
  }, 30000);
});

これはjsfiddleの実例です

于 2012-05-01T11:42:19.367 に答える