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

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

Answer 3

如果您打算使用该字段的自动保存功能，类似于gmail如何保存草稿，那么我相信您将需要单独的ajax调用。正如bwegs所建议的那样，使用setInterval。如果你绝对必须保持键盘调用，那么只需在它下面添加这样的东西

boolean isSuccess = logHelper.performForgotPwdValidation(agentDetails);
    PrintWriter out = null;
    JsonObject jsonObj = new JsonObject();
    try 
    {
        jsonObj.addProperty("isValid", isSuccess);
        response.setContentType( "application/json" );
        response.setCharacterEncoding("UTF-8");
        out = response.getWriter();
        out.write(jsonObj.toString());
        out.flush();
    } 
    catch (IOException e) 
    {
        e.printStackTrace();
    }
    finally
    {
        if( null != out )
        {
            out.close();
        }
    }

编辑：我真的不认为有一种方法可以在没有多次通话的情况下解决这个问题。除非您按键击间隔（例如每10-15次按键）。

希望别人可以做得更好？

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

3 个答案: