如何仅每隔几秒钟获取变量并进行更新

abetwothree 发表于 Dev

abetwothree

我有一张表格，每天结束时我公司的维护人员都要填写，以描述他们当天的工作。有些人有时会在手机上填写。他们抱怨说，如果接到电话或发短信，他们将丢失他们键入的日志。

因此，我要做的是通过AJAX将表单值存储到PHP SESSION变量中，如果只要登录表单就被重新加载，则回显该变量。

这是输入字段之一：

<textarea class="form-control" name="8to10" id="d8to10" placeholder="8 to 10 am" rows="8">
  <?php if(isset($_SESSION['d8to10'])){echo htmlspecialchars($_SESSION['d8to10'], ENT_QUOTES);} ?>
</textarea>
<span id="saved1"><span>

这是相应的Javascript，它获取字段的值并通过AJAX发送，以将其存储到SESSION变量中。

$('#d8to10').on("keyup", function(){

    var d8to10 = $(this).val();
    $('#saved1').css('display', 'none');

    d8to10 = encodeURIComponent(d8to10);
    //console.log(d8to10);

    var ajaxRequest;
    clearTimeout(ajaxRequest);
        ajaxRequest = setTimeout(function() {

            $.ajax({
                type: 'post',
                url: 'Includes/dailyLogCacheLog.php',
                data: 'd8to10=' + d8to10,
                success: function(r) {
                    $('#saved1').css('display', 'inline');
                    $('#saved1').html('<p>Saved</p>');
                }
            });
        }, 3000, d8to10);

});

因此，我现在想做而又想不出该怎么做的方法是，每输入5或10秒钟就抓取一次变量，然后在该时间范围内保存该变量。这是因为现在在键入每个字母后都将调用AJAX，并且他们抱怨保存的消息闪烁太多。

有人知道这样做的方法吗？

索切利

这样的事情可能会解决问题，它基本上只在用户停止键入后大约三秒钟执行ajax。如果要在用户键入时进行多个呼叫，则可以删除clearTimeout并中止呼叫。

var timeout_d8to10;
var xhr_d8to10;
$('#d8to10').on("keyup", function(){
    var $this = $(this);
    if (timeout_d8to10) {
        clearTimeout(timeout_d8to10);
    }
    if ( xhr_d8to10) {
        xhr_d8to10.abort();
    }
    timeout_d8to10 = setTimeout( function () {
        var d8to10 = $this.val();
        d8to10 = encodeURIComponent(d8to10);

        $('#saved1').css('display', 'none');
        xhr_d8to10 = $.ajax({
            type: 'post',
            url: 'Includes/dailyLogCacheLog.php',
            data: 'd8to10=' + d8to10,
            success: function(r) {
                $('#saved1').css('display', 'inline');
                $('#saved1').html('<p>Saved</p>');
            }
          });

    }, 3000);
});