运行只有选中的文字稳定时才动作

Question

我想为 action 函数设置一个计时器。 The rule is: when the selected text does not change for 3 seconds, we 运行 the function action with the selected text.

我在 playground https://microsoft.github.io/monaco-editor/playground.html 中尝试了以下代码，但没有成功。当我非常快速地更改所选文本时，他们的操作并没有被取消。

有人能帮忙吗？

const editor = monaco.editor.create(document.getElementById('container'), {
    value: '1+2+3+4+5+6+7',
    language: 'javascript'
});

function action(x) {
    console.log("action", x)
}

let myTimeout
editor.onDidChangeCursorSelection((e) => {
    clearTimeout(myTimeout)
    console.log("cleared", myTimeout)
    let selectedText = editor.getModel().getValueInRange(editor.getSelection())
    if (selectedText != "") { // if we are already in this event, the selected text must change
        myTimeout = setTimeout(action(selectedText), 3000);
        console.log("set", myTimeout, selectedText)
    } 
})

编辑 1： 我的组件是 class 组件，所以我不能使用钩子调用。

Answer 1

您可以使用lodash的debounce来达到您想要的效果。并使用 useCallback 确保您获得相同的函数实例。我认为这样的实现可能有效：

import _ from 'lodash';

...

const debouncedAction = _.debounce(action, 3000).bind(this);

editor.onDidChangeCursorSelection((e) => {
    let selectedText = editor.getModel().getValueInRange(editor.getSelection())
    if (selectedText != "") { // if we are already in this event, the selected text must change
        debouncedAction(selectedText);
    } 
})

我用了this作为参考。

Answer 2

setTimeout 在您调用函数时将其作为输入。我认为下面的代码运行良好。

const editor = monaco.editor.create(document.getElementById('container'), {
    value: '1+2+3+4+5+6+7',
    language: 'javascript'
});

function action(x) {
    console.log("action", x)
}

let myTimeout
editor.onDidChangeCursorSelection((e) => {
    clearTimeout(myTimeout)
     let selectedText = editor.getModel().getValueInRange(editor.getSelection())
    if (selectedText != "") {
        // "action" is called inside a function
        myTimeout = setTimeout(() => action(selectedText), 3000);
    } 
})

运行只有选中的文字稳定时才动作

Run the action only when the selected text is stable

javascript

lodash

reactjs

monaco-editor