jQuery实现文章编辑后自动保存功能

小郝不负流年
小郝不负流年   + 关注
2020-11-06 00:08:10   阅读508   评论0

概述:

为了防止网络原因或不小心关闭了网页等意外导致好不容易编辑的内容丢失,我们需要一个自动保存的功能,但是如果每次变更内容都实时进行保存操作,会频繁请求后台,对服务器压力比较大,因此需要加入一个延时保存的机制,这个延迟时长看个人需求了,我这里是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);
        }
    }
});


效果:

对我有用,我要     转载  
文章分类: Web前端  
所属标签: 自动保存  
  • 0条评论
  • 只看作者
  • 按时间|按热度
  • 由于本人多次涉及需要打印这个证明,而每次都会忘记入口,在网上各种搜索各种摸索很是浪费时间。故本次将操作流程整理记录下来,以备忘。同时也分享给大家。1、打开湖北政务服务网,地址:http://zwfw.hubei.gov.cn/s/index.html2、切换区域到“武汉市”3、在“特色服务”模块找到“(个人)武汉市社会保险公共服务平台”4、进入“(个人)武汉市社会保险公共服务平台”,登录账号密码<imgsrc="https://cdnstatic.hoscen.cn/blog/article/184053017752895488/img/497065960be44747825acb86a17483c1.png"style=
  • 解决办法:是idea的加载有问题,关闭IDEA,在工程的根目录下删除.idea文件,重新打开IDEA加载就好了。
  • 如何使用postman模拟http发送xml参数报文的POST请求?1、postman工具通过安装软件或使用谷歌插件都可以,这里不再赘述。2、配置postman,选择POST,填写URL;切换到Headers,添加Content-Type:text/xml 3、切换到body,选择raw,XML,下方填写你的请求报文4、点击Send发送请求,如图可以看到响应状态、时间、结果等信息5、讲到这里就结束了,是不是学会了?快去试试吧!
  • Failedtoloadprojectconfiguration:cannotparsefileF:/xx/.idea/modules.xml:ParseErrorat[row,col]:[1,1]Message:文件提前结束。解决办法:关闭idea,删掉这个文件,重新打开idea
  • java中的注解@Generated用来标注源代码中的某些东西是由某些工具生成的,而不是人写的。这个注解可以用于:包、类、注解类、方法、构造方法、变量、本地变量、方法参数。
  • 目录:1、安装node.js环境2、安装cnpm3、安装vue-cli脚手架构建工具4、用vue-cli构建项目5、安装项目所需的依赖6、项目运行7、项目打包1、安装node.js环境下载地址:https://nodejs.org/zh-cn/安装过程没有太多好说的,安装完成后 win+R打开命令行输入node -v , 如图,出现版本号说明安装成功。npm包管理器是集成在node中的 , npm -v可以查看版本2、安装cnpm由于有些npm有些资源被屏蔽或者是国外资源的原因,经常会导致用npm安装依赖包的时
  • 建立服务器内网其他IP端口的隧道,可以将远程的服务映射到本地进行访问。finalshell配置隧道方法:
  • 上传图片微服务网关报错:UT000054:Themaximumsize1048576foranindividualfileinamultipartrequestwasexceeded原因:所用容器对文件的限制一般项目用的是spring 对spring参数进行配置即可spring:servlet:multipart:#MultipartPropertiesmax-request-size:10MB#总文件大小max-file-size:10MB#单个文件大小注意如果是nginx代理配置限制,报错信息里面会标记nginx。届时需要设置nginx在server_name下加上client_max_body_size20m;
  • 很多时候我们需要Linux服务器定时去运行一个脚本来触发一个操作,比如写缓存数据到硬盘、定时备份、定时重启服务、定期清除日志等。下面就简单讲解一下Linuxcrontab命令如何实现自动循环执行shell脚本。一、准备shell脚本比如我们准备一个hello.shvim/hcn/sh/hello.sh#!/bin/bash  DATETIME=$(date"+%Y%m%d%H%M%S") echo"hello, www.hoscen.cn,时间:${DATETIME}"  通过chmod命令赋予该脚本的执行权限chmod755hello.sh测试正确性二、开启crontab服务 linux应该都有crontab,没有的话可以安装一下:yuminstall vixie-cronyuminstall crontabsvixie-cron软
  • 本文讲触发el-dialog前动态修改窗口title的方法。1、el-dialog添加title属性el-dialog :title="titleType+'菜单'" :visible.sync="dialogVisible" width="800px" >el-dialog>  2、初始化变量(titleType,名称自己定义)export&