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 似乎也不正确（一个太多$()）。它应该是：

$('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)将不起作用（匿名函数中的 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 回答