富文本每30秒保存一次(根据内容修改来调动接口）

最新推荐文章于 2024-02-19 20:30:00 发布

小野又在卷了

最新推荐文章于 2024-02-19 20:30:00 发布

阅读量145

点赞数

分类专栏： js vue 文章标签： javascript

本文链接：https://blog.csdn.net/Jenny_ljj/article/details/120888977

版权

vue 同时被 2 个专栏收录

19 篇文章 2 订阅

订阅专栏

14 篇文章 0 订阅

订阅专栏

富文本每30秒保存一次(根据内容修改来调动接口）

需求：监听富文本内容的变化，有改变就触发事件
方法：采用节流来控制定时器

1. 首先封装一个 throttle.js

export function throttle(fn, delay) {
	//节流
	let canRun = true; // 通过闭包保存一个标记
	return function() {
		if (!canRun) return; // 在函数开头判断标记是否为true，不为true则return
		canRun = false; // 立即设置为false
		setTimeout(() => {
			// 将外部传入的函数的执行放在setTimeout中
			fn.call(this);
			// 最后在setTimeout执行完毕后再把标记设置为true(关键)表示可以执行下一次循环了。当定时器没有执行的时候标记永远是false，在开头被return掉
			canRun = true;
		}, delay);
	};
}

引入到页面中

import { throttle } from "../../util/throttle";

export default:{
 watch: {
        msg: {
            handler: throttle(function () {
                let temp = `<body>${this.msg}</body>`;
                this.$post(this.api.saveRecord, {
                    content: temp,
                    id: this.caseSchedulingId,
                }).then((res) => {
                    if (res.code == 200) {
                        this.$message.success("保存成功！");
                    }
                });
            }, 30000),
        },
    },
    }

小野又在卷了

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
富文本每30秒保存一次(根据内容修改来调动接口）

富文本每30秒保存一次(根据内容修改来调动接口）需求：监听富文本内容的变化，有改变就触发事件方法：采用节流来控制定时器1. 首先封装一个 throttle.jsexport function throttle(fn, delay) { //节流 let canRun = true; // 通过闭包保存一个标记 return function() { if (!canRun) return; // 在函数开头判断标记是否为true，不为true则return canRun = f
复制链接

扫一扫