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

小郝不负流年
小郝不负流年   + 关注
2020-11-06 00:08:10   阅读1056   评论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=
  • java中的注解@Generated用来标注源代码中的某些东西是由某些工具生成的,而不是人写的。这个注解可以用于:包、类、注解类、方法、构造方法、变量、本地变量、方法参数。
  • 如何使用postman模拟http发送xml参数报文的POST请求?1、postman工具通过安装软件或使用谷歌插件都可以,这里不再赘述。2、配置postman,选择POST,填写URL;切换到Headers,添加Content-Type:text/xml 3、切换到body,选择raw,XML,下方填写你的请求报文4、点击Send发送请求,如图可以看到响应状态、时间、结果等信息5、讲到这里就结束了,是不是学会了?快去试试吧!
  • 解决办法:是idea的加载有问题,关闭IDEA,在工程的根目录下删除.idea文件,重新打开IDEA加载就好了。
  • Failedtoloadprojectconfiguration:cannotparsefileF:/xx/.idea/modules.xml:ParseErrorat[row,col]:[1,1]Message:文件提前结束。解决办法:关闭idea,删掉这个文件,重新打开idea
  • 建立服务器内网其他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;
  • 目录: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安装依赖包的时
  • 控制台信息:Unabletostartthedaemonprocess.Thisproblemmightbecausedbyincorrectconfigurationofthedaemon.Forexample,anunrecognizedjvmoptionisused.PleaserefertotheUserManualchapteronthedaemonathttps://docs.gradle.org/6.3/userguide/gradle_daemon.htmlProcesscommandline:E:\DevelopTools\Java\OpenJDK8U-jdk_x86-32_windows_hotspot_8u282b08\jdk8u282-b08\bin\java.exe-XX:MaxHeapSize=1024m-Xms1024m-Xmx2048m-Dfile.encoding=UTF-8-Duser.country=CN-Duser.language=zh-Duser.variant-cpE:\DevelopTools\gradle-6.8.2-all\gradle_resp\wrapper\dists\gradle-6.3-bin\8tpu6egwsccjzp10c1jckl0rx\gradle-6.3\lib\gradle-launcher-6.3.jarorg.gradle.launcher.daemon.bootstrap.GradleDaemon6.3Pleasereadthefollowingprocessoutputtofindoutmore:-----------------------ErroroccurredduringinitializationofVMCouldnotreserveenoughspacefor2097152KBobjectheapPickedupJAVA_
  • 问题maven同一个版本号部署远程仓库,出现报错:Returncodeis: 400,ReasonPhrase:Repositorydoesnotallowupdatingassets:maven-releases. 解决maven在部署(deploy)时候抛的异常,存储库不允许更新资产,这个就是和私有maven库更新策略有关。具体设置步骤:1.访问私有库管理界面http://xxx.xxx.xxx.xxx:80812.登录管理员账号(默认:admin/admin123)3.进入设置界面->repository->repositories->maven-releases(自己需要部署的目标库)->setting->Deploymentpollcy(Allowredeploy)允许更新