概述:
为了防止网络原因或不小心关闭了网页等意外导致好不容易编辑的内容丢失,我们需要一个自动保存的功能,但是如果每次变更内容都实时进行保存操作,会频繁请求后台,对服务器压力比较大,因此需要加入一个延时保存的机制,这个延迟时长看个人需求了,我这里是3秒延迟。
原理:
1、监听内容变化,执行事件在浏览器缓存内容变化的时间戳;
2、使用js计时器进行延迟时间倒计时,如果期间内容有变化,则清除旧的计时器,重新启动新的计时器;
3、在计时器倒计时结束之后,执行保存逻辑(因为每次变化监听后都会先清除计时器,所以计时器结束即意味着3秒内内容没有变化,可以执行保存逻辑)
核心代码:
/*监听标题、内容变化,实现自动保存*/ var timeOut; $(".data-modify-listener, #edit .fr-view").bind('input propertychange DOMCharacterDataModified paste', function () { if ($("#autoSave").val() == 1) { window.clearTimeout(timeOut); // 有变化,就清除延时保存计时器 if ($("#edit").froalaEditor('html.get') == "") { // 文章内容为空,则不会自动保存,给出提示 $(".article-autoSave .opttip span").text("保存失败:文章内容为空"); return false; } else { // 延时保存避免请求频繁, 3秒内没有变化,就自动保存 timeOut = window.setTimeout(function () { if ($("#edit").froalaEditor('html.get') == "") { // 文章内容为空,则不会自动保存,给出提示 $(".article-autoSave .opttip span").text("保存失败:文章内容为空"); window.clearTimeout(timeOut); return false; } // 保存逻辑 var rflag = saveDraft('autoSave'); // 提示 $(".article-autoSave .opttip span").text(rflag == 0 ? "保存失败":"保存成功"); }, 3000); } } });