jQuery，使用多个事件触发器？

Question

我有一个 HTML 表，我正在用数据库表中的信息填充该表。我已经使表中的单元格在单击时可编辑，并添加了 jQuery 来捕获单元格何时完成编辑(最后一次按键后 2.5 秒)，然后 ajax 将信息发送到一个单独的 php 文件，以使用更改后的数据更新数据库表值(value)。我发现的一个问题是，如果单击单元格进入另一个单元格，并且在 2.5 秒结束之前进行更改，则第一个更改永远不会更新到数据库。

我的问题是:如果我想改为场模糊事件，有没有办法仍然可以合并计时器，以便在场模糊或超时时达到 ajax达到了吗？

$('td').on('input', function() {
    var _this = $(this); // preserve reference to the input field here

    if(saveTimeout) clearTimeout(saveTimeout);
    saveTimeout = setTimeout(function() {
        console.log(_this)
        $.ajax({
            method: "POST",
            url: "updatedatabase.php",
            data: { 
                content: _this.text(), 
                date: _this.siblings().first().text(),
                prod: $('tr:first-child th:nth-child(' + (_this.index() + 1) + ')').text(),
                old: old
            }
        })
        .done(function( msg ) {
            alert( msg );
        });

    }, 2500);
});

Answer 1

我建议您根据触发它的事件使用不同的 .setTimeout 延迟。

因此，在 blur 上，它不会等待 2.5 秒来保存，就像在 input 上一样。

已编辑
为了防止“双重保存”，请将 td 标记为已保存。

var saveTimeout;

// Remove the "saved" class on keydown
$('td').on('keydown', function(e) {
    $(this).removeClass("saved");
});

$('td').on('input blur', function(e) {
    console.log("event "+e.type+" occured");
    var timeoutDelay=2500;

    if( e.type == "blur" ){
        timeoutDelay=1;
    }

    // If NOT already saved...
    if( !$(this).hasClass("saved") ){
        var _this = $(this); // preserve reference to the input field here

        clearTimeout(saveTimeout);
        saveTimeout = setTimeout(function() {
            console.log(_this);

            $.ajax({
                method: "POST",
                url: "updatedatabase.php",
                data: { 
                    content: _this.text(), 
                    date: _this.siblings().first().text(),
                    prod: $('tr:first-child th:nth-child(' + (_this.index() + 1) + ')').text(),
                    old: old
                }
            })
            .done(function( msg ) {
                alert( msg );
                // Add the "saved" class to prevent other saving
                _this.addClass("saved");
            });

            console.log("Ajax sent");

        }, timeoutDelay);
    }
});