Question

我正在尝试根据特定的时间间隔更改页面。我尝试使用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>

Answer 1

您的语法不正确。您需要使用匿名函数，否则将立即调用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 docs。

Answer 2

您对$(this)的引用不起作用（这在匿名函数中最终为DOMWindow ^Example）setTimeout()，您需要捕获变量以使函数正常运行。

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

<强> Here is a working example on jsfiddle

setTimeout不等待JQuery Mobile中的指定时间间隔

2 个答案: