javascript - 如何每隔几秒获取变量并更新它

Question

我有一个表格，我公司的维修人员在一天结束时填写表格来描述他们当天做了什么。有些人有时会在手机上填写。他们提示说，如果他们接到电话或短信，他们会丢失他们输入的日志。

所以我所做的是通过 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，他们提示保存的消息闪烁太多。

有人知道如何做到这一点吗？

Answer 1

这样的事情可能会成功，这基本上只在用户停止输入后大约三秒钟执行 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);
});