多文本域延迟保存仅触发最后一个文本域AJAX请求的问题求助

我在网页上放置了多个文本域，实现的逻辑是：当在文本域中输入内容时，通过keyup事件触发一个延迟函数，延迟结束后把当前文本域的内容通过AJAX请求提交保存。AJAX请求和后端保存的逻辑本身是正常的，但现在遇到了一个困扰的问题：如果我在延迟触发完成前，切换到另一个文本域输入内容，那么只有最后一个被输入的文本域的修改会被发送到AJAX请求，前面的文本域的修改请求直接被覆盖了。

目前的问题表现 #

1. 输入文本域1
2. 紧接着输入文本域2
3. 最终只有文本域2的修改会被发送到AJAX请求

期望的正确行为 #

1. 输入文本域1后，延迟结束后触发AJAX请求保存它的修改
2. 输入文本域2后，延迟结束后触发AJAX请求保存它的修改
3. 输入文本域2的操作不应该影响文本域1的保存流程

以下是我当前的代码：

HTML 代码 #

<div data-mid="123">
    <div class="box" data-id="1">
        <textarea class="note" placeholder="...write something">123</textarea>
    </div>
    <div class="box" data-id="2">
        <textarea class="note" placeholder="...write something">1234</textarea>
    </div>
    <div class="box" data-id="3">
        <textarea class="note" placeholder="...write something">12345</textarea>
    </div>
    <div class="box" data-id="4">
        <textarea class="note" placeholder="...write something">123456</textarea>
    </div>
</div>

JavaScript 代码 #

function delay(callback, ms) {
    var timer = 0;
    
    return function() {
        var context = this, args = arguments;
        clearTimeout(timer);
        timer = setTimeout(function () {
            callback.apply(context, args);
        }, ms || 0);
    };
}

function save(rootNode)
{
    var note = rootNode.val();
    
    ajaxCall(null, 2, note, false);
}

$('.box').on('keyup', 'textarea', delay(function(event) {
    save($(this));
}, 2000));

我现在的问题是：怎么修改代码，让每个文本域的延迟保存逻辑互相独立，不会因为切换输入其他文本域而取消前面的保存请求？

备注：内容来源于stack exchange，提问作者llanato