如何使用元素中的值設置setInterval中的間隔

Question

我有一個頁面，顯示接受參加活動的人員以及有關他們的一些詳細信息。 這些人通過填寫表格來接受，然后將其提交到數據庫。 我的頁面基本上向它發出AJAX請求，並獲取所有相關數據，然后將它們分類為可讀的布局。

我正在嘗試為查看此頁面的人添加選項以設置刷新率-即每次重新生成AJAX請求之前的時間。 例如，可能選擇30秒，因此每次經過30秒時頁面都會發出另一個AJAX請求並覆蓋舊數據...

我所做的是使用下拉框進行一些選擇（60秒，120秒等等）。 當該部分加載包含AJAX調用的javascript時，會從Dropbox中獲取值並將其用作setInterval函數中的參數，例如

recurring = setInterval(function() {
                            getSchedule(dateText.trim());
                        },
                        $('input[type=hidden]#rr').val());

但是請求是不間斷的。 起初我以為問題可能是當期望的參數應該是數字時，JQuery選擇的結果是字符串，所以我嘗試了

recurring = setInterval(function() {
                            getSchedule(dateText.trim());
                        },
                        parseInt($('input[type=hidden]#rr').val(),10));

但還是一無所有。 我不知道這是否意味着什么，但是在測試此代碼時（當我嘗試查看值的類型時）

var interval = parseInt( $('input[type=hidden]#rr').val() , 10 );
alert( typeof ( interval ) + ' -- ' + interval );

警報框寫道

數字-NaN

有任何想法嗎？

好的，這是一個顯示html代碼的編輯

<div class='fields'>
    <input type='hidden' name='rr' id='rr' value='<?php if ( $_SESSION['rr'] != 0 ) echo $_SESSION['rr']*1000; else echo 86400000;  ?>'/>
    <div style='float:left; padding-top:5px;'>
        <b><i>TIME</i></b>
    </div>
</div>
<div id='schedule' style='overflow:auto;'>
</div>

這是顯示數據的部分。 AJAX結果進入進度表div，並且已更新。 隱藏字段包含該間隔的毫秒數，這是我通過使用JQuery獲得的時間。 它存儲在數據庫中，並且在加載此頁面時，與數據庫進行一些通信，然后從那里獲取並將其保存在會話數組中

Answer 1

一旦使用setInterval ，除非您顯式調用clearInterval ，否則它將繼續調用您的函數。

相反，我建議您應使用[setTimeout]這樣

setInterval(function () {
    getSchedule(dateText.trim());
},
$('input[type=hidden]#rr').val());

然后在您的函數getSchedule ，再次調用setInterval。 這樣，函數每次執行時，都會為其設置時間段。

function getSchedule(...){
   ...
   setInterval(function () {
        getSchedule(dateText.trim());
    },
    $('input[type=hidden]#rr').val());
}

就輸入值而言，直到看到您的HTML，我才能發表評論

Answer 2

[更新]可能有幫助但不能解決您的問題的一些評論：

作為選擇，由於您使用的是ID，因此您應該直接（更快）選擇：

parseInt($('#rr').val()); // by default the base is 10

注意：您不必使用typeof，因為您始終會解析為int，它將始終是一個數字

我認為您的問題可能與該價值有關，是否存在？ 您可以檢查頁面並檢查html的值是什么嗎？

Answer 3

因此，我從來沒有理解過為什么值讀錯了，也許瀏覽器在更改之前使用了緩存並加載了javascript ...無論如何，在上述有效的幫助下，我的最終解決方案如下

$(document).ready(function() {
    $('#datepicker').datepicker( {
        showOtherMonths: true,
        selectOtherMonths: true,
        dateFormat: 'yy-mm-dd',
        inline: true,
        onSelect: function(dateText, inst) {
                getSchedule(dateText.trim());
        }
    });

    var timeout;
    var today = $('#datepicker').datepicker('getDate');
    getSchedule($.datepicker.formatDate('yy-mm-dd', today));
});

function getSchedule(date)
{   
    if ( 'undefined' === typeof(timeout) ) ; else clearTimeout(timeout);
    timeout = setTimeout(function() {
                            getSchedule(date);
                        },
                        parseInt($('input[type=hidden]#rr').val(), 10)
                        );


    var request = $.ajax({
        type    : 'POST',
        url     : './scripts/php/schedule.php',
        data    : { date: date }
    });

    request.done(function(data,textStatus,jqXHR) {
        var height = $(window).height()-150;
        $("#schedule").height(height).html(data);
        }
    });

    request.fail(function(jqXHR, textStatus, errorThrown) {
    }); 
}

和HTML

<div class='fields'>
        <input type='hidden' name='rr' id='rr' value='<?php if ( $_SESSION['rr'] != 0 ) echo $_SESSION['rr']*1000; else echo 86400000;  ?>'/>
        <div style='float:left; padding-top:5px;'>
            <b><i>TIME</i></b>
        </div>

</div>
<div id='schedule' style='overflow:auto;'>
</div>