如何使用元素中的值设置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>