Monaco Editor：限制registerInlineCompletionsProvider的API调用次数

核心思路：用闭包维护防抖状态 #

补全提供者的回调每次触发时，若直接在函数内声明超时ID，会因每次调用重置变量导致旧任务无法取消。需把防抖相关状态（超时ID、等待标记）放在闭包作用域中，确保多次调用间状态持续保留。

具体实现（以Monaco Editor为例，其他编辑器逻辑通用） #

// 防抖状态变量放在补全提供者外部，通过闭包共享
let debounceTimeoutId = null;
let isDebouncePending = false;

const inlineCompletionProvider = {
  provideInlineCompletions: async (model, position) => {
    // 1. 取消之前未执行的超时任务
    if (debounceTimeoutId) {
      clearTimeout(debounceTimeoutId);
      debounceTimeoutId = null;
    }

    // 2. 若已有等待中的API请求，直接返回空补全
    if (isDebouncePending) {
      return { completions: [] };
    }

    // 3. 包装超时逻辑，2秒后触发API调用
    return new Promise((resolve) => {
      isDebouncePending = true;
      debounceTimeoutId = setTimeout(async () => {
        try {
          // 获取当前编辑器内容与光标位置
          const currentCode = model.getValue();
          const cursorPos = {
            line: position.lineNumber,
            column: position.column
          };

          // 调用后端API获取补全结果
          const response = await fetch('/api/completion', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
              code: currentCode,
              ...cursorPos
            })
          });
          const completions = await response.json();

          // 转换为编辑器兼容的补全格式返回
          resolve({
            completions: completions.map(item => ({
              insertText: item.text,
              range: {
                startLineNumber: cursorPos.line,
                startColumn: cursorPos.column,
                endLineNumber: cursorPos.line,
                endColumn: cursorPos.column
              }
            }))
          });
        } catch (error) {
          // 出错时返回空补全
          resolve({ completions: [] });
        } finally {
          // 重置等待状态
          isDebouncePending = false;
          debounceTimeoutId = null;
        }
      }, 2000);
    });
  }
};

// 注册补全提供者到编辑器
monaco.languages.registerInlineCompletionProvider('javascript', inlineCompletionProvider);

关键细节说明 #

• 闭包状态共享：debounceTimeoutId和isDebouncePending脱离回调函数作用域，确保多次触发补全时能读取到最新状态，不会每次调用都重置。
• 立即终止旧任务：每次触发补全时先清除之前的超时，避免旧请求延迟返回干扰当前输入。
• 等待状态标记：isDebouncePending避免等待期间重复触发空补全之外的操作，减少无效执行。
• Promise异步封装：适配编辑器补全提供者的异步返回要求，确保结果能正确传递。

React组件内的适配实现 #

如果是在React组件中集成编辑器，需用useRef存储防抖变量，避免组件重渲染时重置状态：

import { useRef, useEffect } from 'react';
import * as monaco from 'monaco-editor';

function EditorComponent() {
  const debounceTimeoutId = useRef(null);
  const isDebouncePending = useRef(false);

  useEffect(() => {
    const editor = monaco.editor.create(document.getElementById('editor'), {
      value: '',
      language: 'javascript'
    });

    const inlineCompletionProvider = {
      provideInlineCompletions: async (model, position) => {
        if (debounceTimeoutId.current) {
          clearTimeout(debounceTimeoutId.current);
          debounceTimeoutId.current = null;
        }

        if (isDebouncePending.current) {
          return { completions: [] };
        }

        return new Promise((resolve) => {
          isDebouncePending.current = true;
          debounceTimeoutId.current = setTimeout(async () => {
            try {
              const currentCode = model.getValue();
              const cursorPos = {
                line: position.lineNumber,
                column: position.column
              };

              const response = await fetch('/api/completion', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ code: currentCode, ...cursorPos })
              });
              const completions = await response.json();

              resolve({
                completions: completions.map(item => ({
                  insertText: item.text,
                  range: {
                    startLineNumber: cursorPos.line,
                    startColumn: cursorPos.column,
                    endLineNumber: cursorPos.line,
                    endColumn: cursorPos.column
                  }
                }))
              });
            } catch (err) {
              resolve({ completions: [] });
            } finally {
              isDebouncePending.current = false;
              debounceTimeoutId.current = null;
            }
          }, 2000);
        });
      }
    };

    monaco.languages.registerInlineCompletionProvider('javascript', inlineCompletionProvider);

    return () => {
      editor.dispose();
      if (debounceTimeoutId.current) clearTimeout(debounceTimeoutId.current);
    };
  }, []);

  return <div id="editor" style={{ width: '100%', height: '500px' }} />;
}

额外优化建议 #

• 取消无效API请求：用AbortController在触发新超时前取消未完成的API请求，避免无效响应占用资源。
• 动态调整防抖时长：根据编辑器语言、用户输入习惯调整2秒阈值，平衡响应速度与API调用频率。
• 光标位置校验：API返回后对比当前光标位置与请求时的位置，避免补全出现在错误位置。

内容的提问来源于stack exchange，提问作者Raphael Rissato