怎么让当前页面只能有一人在编辑

Question

怎么让当前页面只能有一人在编辑，我在后端用Dictionary,记录了当前编辑的pet, 当页面关闭时会移除Dictionary，通过判断Dictionary是否存在该pet,来判断是否有人在判断该pet,但有时在unbeforeload事件不会被执行，怎么确保关闭浏览器或者页面，电脑能执行移除操作，
或者有其他更好的方法替代

Answer 1

下午好🌅🌅🌅
本答案参考ChatGPT-3.5

要实现这一点，您需要在前端和后端之间实现一些同步逻辑。这可以通过使用定时器（例如setInterval）或异步请求（如fetch API）来实现。

以下是一种使用定时器的方法：

1. 在前端：创建一个定时器，并将其绑定到文档的window.onload事件中。当窗口加载完成后，定时器将开始运行。
2. 在后端：在更新宠物字典时，检查宠物是否已被删除。如果宠物已从字典中删除，则清除定时器以防止重复操作。
3. 使用JavaScript和Fetch API获取宠物字典：

function getPet dictionaryKey() {
    // 通过检测字典中是否存在名为宠物名的键来决定谁在编辑这个宠物
}

// 获取宠物字典
let pet dictionary = new Dictionary(dictionaryKey);

另外，您可以考虑使用Promise和async/await技术来避免回调地狱。这样可以更清晰地管理您的代码并使它更具可读性。

在Unbeforeload事件中调用removePet函数也可以满足您的需求，但是它可能会被浏览器的默认行为阻止。为了避免这种情况，您可以将此事件添加到document.addEventListener('DOMContentLoaded', function() { removePet(); })；这将确保所有预先加载的内容都在DOMContentLoaded事件之前完成。

以下是修改后的代码：

class Dictionary {
    constructor(key) {
        this.key = key;
    }

    removePet(petName) {
        // 清除定时器
        this._deletePet(petName);

        // 判断宠物是否已从字典中删除
        if (!this.has宠物Name) {
            return;
        }

        // 将宠物从字典中删除
        this.deletePet(petName);
    }
}

// 定义宠物字典的构造函数
function Dictionary(key) {
    this.key = key;
    this._ pets = [];
}

// 添加宠物字典到字典
Dictionary.prototype.addPet = (petName) => {
    let pet = new Pet(this.key, petName);
    this._ pets.push(pet);
};

// 删除宠物字典中的特定宠物
Dictionary.prototype.deletePet = (petName) => {
    let index = this._ pets.findIndex((pet) => pet.name === petName);
    if (index !== -1) {
        this._ pets.splice(index, 1);
    }
};

// 创建新的Pet对象
function Pet(name, petName) {
    this.name = name;
    thisPET_NAME = petName;
}

// 测试函数
test();

请注意，为了使这些更改生效，请确保在测试代码中已经正确地执行了addPet和deletePet方法。如果这些方法未被正确调用，那么上述建议可能无法工作。