Firebase-如何检测onSnapshot的来源

Question

我正在构建一个简单的firebase应用程序。 主要文本区域链接到Firebase上的条目。 当用户键入内容时，我会debounce keyup事件（300毫秒），然后在Firebase上进行更新。

从服务器返回时，每个.update事件都会触发一个onSnapshot事件（这是Firebase的预期行为）。 我的问题是，它会在用户键入内容时打扰他们。 因为请求到达服务器的时间与返回服务器之间存在延迟。 回来时，用户已经输入了更多文本，并且文本区域的内容与.update触发时的内容不同。

这是我的代码和一个说明问题的jsFiddle：

var textareaElement = document.querySelector('textarea');

// Initialize Firebase
var config = {
  apiKey: "XXX",
  authDomain: "XXX",
  projectId: "XXX",
};
firebase.initializeApp(config);
const db = firebase.firestore();
const doc = db.collection("notes").doc('XXX');

// This is debounced
const update = function(){
    doc.update({
    text: textareaElement.value,
    updated_at: firebase.firestore.FieldValue.serverTimestamp()
  })
}

// Update the server when we change the client
textareaElement.addEventListener('keyup', _.debounce(update, 300));

// Listen for changes from the server
doc.onSnapshot(function(doc){
    textareaElement.value = doc.data().text
});

的jsfiddle

https://jsfiddle.net/x6h80keb/2 （以正常速度输入，您会明白我的意思）

jsFiddle-没有serverTimestamp（）

https://jsfiddle.net/x6h80keb/6/

我发现删除对serverTimestamp()函数的调用serverTimestamp() 。 看起来是造成请求延迟的原因。 它使“错误”几乎不明显，但有时仍会发生，当请求需要更长的时间才能执行时。

我能想到的唯一解决方案是检测更新的发起者。 每当触发onSnapshot事件时，我们都可以调查doc对象，并判断是从此客户端还是从另一个客户端进行了更改。 但是显然没有这样的功能。

有什么想法可以解决这个问题吗？

编辑：

我最终增加了反跳延迟。 我没有等待300毫秒后更新，而是等待了几秒钟。 这样，用户输入不会受到打扰。 我还将在.update期间冻结textarea。

Answer 1

这是因为书面文档的内容可能与自文档更新以来用户输入的内容不同。

重新考虑以下代码：

doc.onSnapshot(function(doc){
    textareaElement.value = doc.data().text
});

这将覆盖自触发反跳操作和用户使用其进度更新文档以来用户键入的任何内容。 在具有高延迟的网络上，这将特别痛苦。

考虑代替不重写在每个文件转换整个textarea的，而是示出了用于他们的打字的同步状态的指示器。 他们的打字是否同步？ 这就是用户需要知道的全部。 您不需要定期覆盖它们的类型。