交互与前端18 CodeMirror 实践2_codemirror redis-CSDN博客

本文介绍了在前端使用CodeMirror实现与后端数据同步的实践，通过节流技术优化频繁交互，确保编辑器在合理时间内与服务器同步。前端编辑器的update事件触发节流更新，change事件标记编辑状态。后端接收到数据后存入redis，再由sniffer服务定期存入数据库，确保数据安全。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

说明

后端交互数据的机制

上一篇已经实现了编辑器，现在就要打通前后端。做到前端编辑的结果自动传输到后端保存，这样就能确保了在线编辑“不掉链”。

1 草稿编辑态。每隔几秒钟，前端页面就应该和后端交互一次，刷新最新的文本状态。
2 调试发布态。进行按钮的点击，以代表编辑者完成了一个可以发布的版本。

内容

1 节流

说到前后端数据的同步，就要提“防抖和节流”的概念。我看这篇文章介绍的挺好。

防抖(Debounce)：原理是维护一个定时器，将很多个相同的操作合并成一个。规定在delay后触发函数，如果在此之前触发函数，则取消之前的计时重新计时，只有最后一次操作能被触发。
节流(Throttle)：原理是判断是否达到一定的时间来触发事件。某个时间段内只能触发一次函数。
区别：防抖只会在最后一次事件后执行触发函数，节流不管事件多么的频繁，都会保证在规定时间段内触发事件函数。

关于防抖，之前在全文搜索的场景下用过。用户会在短时间内快速的修改输入的文本，通过防抖可以防止过于敏感的捕捉到用户误输入的文本，从而加大不必要的搜索负荷。

**而节流则是：当持续触发事件时，保证一定时间段内只调用一次事件处理函数。**这就很适合代码同步的场景，开发者持续编辑，会持续触发change事件；但是只要保证几秒与服务器进行一次同步就足够了。

对应的核心函数

var throttle = function (func, delay) {
   
   
        var prev = Date.now()
        return function () {
   
   
            var context = this;
            var args = arguments;
            var now = Date.now();
            if (now - prev >= delay) {
   
   
                func.apply(context, args);