语法荧光笔无法更新文本

我正在尝试使用 HTML 制作一个代码编辑器：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

import { highlight } from './highlighter.js';

import { Caret } from './caret.js';

(() =>

{

const editor = document.querySelector('#editor code');

const caret = new Caret(editor);

highlight(editor);

editor.addEventListener('input', e =>

{

highlight(editor);

e.preventDefault();

});

editor.addEventListener('keydown', e =>

{

const TAB = 9;

const ENTER = 13;

switch (e.keyCode)

{

// ...

}

});

})();

</script>

</body>

</html>

荧光笔.js：

import { Caret } from './caret.js';

export function highlight(editor)

{

// ...

const NORM = '#E6E6FA';

// ...

const Highlighter = {

source: editor.innerText,

start: 0,

curr: 0,

// ...

fin()

{

return this.curr >= this.source.length;

advance()

{

return this.source[this.curr++];

// ...

scan()

{

let result = '';

this.start = this.curr;

if (this.fin())

{

return null;

}

基本上，它获取用户代码的文本内容，扫描它以生成带有颜色数据的词素，将这些词素拆分为字符，并将其放入带有颜色的 <span> 标签中，然后将这些 <span> 附加到字符串中编辑器的innerHTML更新为，最后用户的光标放回到正确的位置；这是根据输入完成的。但有一个问题：如果用户输入速度太快，他们输入的文本可能会加倍。我尝试使用其他类型的事件侦听器来解决此问题，并尝试简单地使用 setInterval，但效果并不好。

临摹微笑

浏览 191回答 1

1回答

守着一只汪

从你所描述的情况来看如果用户输入太快并看到在元素highlight()的每次更改时都会调用计算量大的函数inputeditor.addEventListener('input', e => { highlight(editor); // <-- e.preventDefault();});我建议取消该调用以突出显示。尝试这样的事情：// Vanilla debounce: https://gist.github.com/peduarte/7ee475dd0fae1940f857582ecbb9dc5ffunction debounce(func, wait = 100) { let timeout; return function(...args) { clearTimeout(timeout); timeout = setTimeout(() => { func.apply(this, args); }, wait); };}// ...// adjust delay to find a balance between responsiveness and performanceconst delay = 500; const runHighlight = () => highlight(editor);const debouncedHighlight = debounce(runHighlight, delay);editor.addEventListener('input', e => { e.preventDefault(); debouncedHighlight();});

随时随地看视频慕课网APP