时间戳

首页 > 解决方案 > 如何在 jQuery 中为 oninput 添加延迟

javascript - 如何在 jQuery 中为 oninput 添加延迟

问题描述

我有以下功能，用户点击输入新键，保存到数据库中。但问题是我的输入被保存到数据库中作为 1,12,123,124,1245,12456 ......等等？我如何输入整个值。?

 wo_input.oninput = function() {
            if (wo_input.value) {
                if (wo_input.value.length > 0) {
                    saveOnChange(wo_input.value, 'wo_number');
                } else { }
            } else { }
        }

保存更改功能

function saveOnChange(val, type) {
    var diagnosis_id = $('#diagnosis_id').val();
    console.log(val + " : " + type + " : " + diagnosis_id);
    $.post('/diagnosis/saveOnChange', {
        '_token': '{{ csrf_token() }}',
        'diagnosis_id': diagnosis_id,
        'value': val,
        'type': type
    }, function(success) {
        console.log(success);
        if (success.redirect) {
            //window.location.href = '/diagnosis/edit/' + success.id;
            window.history.pushState('edit', 'Title', '/diagnosis/edit/'+success.id);
        }
    });
}

HTML

<input class="saveonchange add_media id_input" type="text" name="wo_number" value="" id="wo_input"/>

标签： javascriptjquery

解决方案

您可以setTimeout()在某个延迟后检查是否在该延迟后没有更改。如果没有，则将其保存到您的数据库中。

使用new Date().getTime()您可以获得自 1970/01/01 以来的毫秒数，您可以将其用于检查。

下面的示例在 2 秒内没有输入时记录控制台消息。

const ms = 2000;

$('#test').on('input', (e) => {
  $(e.currentTarget).data('updated', new Date().getTime());
  setTimeout(() => { 
    if(new Date().getTime() - ms >= $(e.currentTarget).data('updated')) {
      console.log(`${ms}ms past. Go save!`);
    }
  }, ms);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="test">

推荐阅读