如何每隔几秒获取一次变量并更新它答案

【问题标题】：How to only get variable every few seconds and update it如何每隔几秒获取一次变量并更新它
【发布时间】：2016-01-27 15:13:55
【问题描述】：

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

所以我所做的是通过 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>

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

$('#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，并且他们抱怨保存的消息闪烁过多。

有人知道怎么做吗？

【问题讨论】：

当用户点击按钮/提交表单时你为什么不更新？？？
将 keyup 回调放入 setTimeout 中，延迟 5 秒。
这将要求用户单击按钮，问题是他们在填写表单时有时会收到随机电话或短信，并且无法单击按钮当这种情况发生时。
将您的函数包装在另一个 setTimeout(<func>,<msec>); 中，以创建一个计时器事件，而不是每个按键上的事件。 keyup 上的事件不是必需的。
对于自动保存使用 localStorage ... 不需要额外的服务器负载来发出所有这些请求。提交成功后清除存储

标签： javascript php jquery ajax

【解决方案1】：

这样的事情可能会奏效，这基本上只在用户停止输入大约三秒后执行 ajax。如果您想在用户键入时进行多个呼叫，您可以删除 clearTimeout 和 abort 呼叫。

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);
});

【讨论】：

抱歉耽搁了。我在做别的事情。但是，是的，我试过你的代码，效果很好！我将您的代码标记为答案，因为我认为在打字完成后保存比在打字时保存更好。

【解决方案2】：

不要在文档加载时在每个keyup 事件上触发您的ajax，而是将您的ajax 调用放在setInterval 函数中，该函数以所需的时间间隔保存textarea 的内容：

var saveInterval; // to store ID in case you want to stop this later

$(document).ready(function() {
    // call saveContent every 3 seconds
    saveInterval = window.setInterval(saveContent, 3000);
});

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

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

    var ajaxRequest;

    ajaxRequest = function() {

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

【讨论】：

不应该在 cmets 部分吗？如果您要回答此类问题，则希望看到一些代码来演示您要解释的内容。
那么在你的例子中，我应该把代码放在哪里来获取变量和存储？
@AbrahamA。请参阅我添加的 saveContent() 函数 - 我移植了您在示例中使用的大部分代码，但删除了 setTimeout 调用，因为它不再需要。
@bwegs，好的，让我试试。感谢您的帮助！

【解决方案3】：

如果您的意图是拥有该字段的自动保存功能，类似于 gmail 保存草稿的方式，那么我相信您将需要一个单独的 ajax 调用。正如 bwegs 建议的那样，使用 setInterval。如果您绝对必须保留 keyup 调用，那么只需在其下方添加类似这样的内容

function getFreshValue() {
  var newVal;

  $.get('someUrl')
    .then(function(data) {
      // Logic that handles inserting the new value
      // and / or making sure there is a valid value first
    });
}

setInterval(getFreshValue, 7500) // 7.5 second interval

编辑：我真的不认为有办法在没有多次调用的情况下解决这个问题。除非您按击键间隔执行此操作（例如每 10-15 次按键）。

希望别人能做得更好？

【讨论】：

我不必绝对使用keyup。我之所以使用它，是因为到目前为止它还有效。但只要可行，任何其他方式都可以使用。