Ejecutar la acción solo cuando el texto seleccionado esté estable.
Me gustaría configurar un temporizador para la función action
. La regla es: cuando el texto seleccionado no cambia durante 3 segundos, ejecutamos la función action
con el texto seleccionado.
Probé el siguiente código en el playground https://microsoft.github.io/monaco-editor/playground.html, pero no funcionó. Cuando cambié rápidamente el texto seleccionado, sus acciones no se cancelaron.
¿Alguien podría ayudar?
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 != "") { // si ya estamos en este evento, el texto seleccionado debe cambiar
myTimeout = setTimeout(action(selectedText), 3000);
console.log("set", myTimeout, selectedText)
}
})
Edición 1: Mi componente es una clase, por lo que no puedo usar llamadas de hook.
davy.ai
Para configurar un temporizador para la función
action
cuando el texto seleccionado no cambia durante 3 segundos, podemos usar la funciónsetTimeout
en combinación con el eventoonDidChangeCursorSelection
del editor Monaco.Aquí hay un ejemplo de código que debería funcionar:
En este código, declaramos una variable
timeoutId
para hacer un seguimiento del temporizador que establecemos consetTimeout
. Cuando se activa el eventoonDidChangeCursorSelection
(es decir, cuando el usuario selecciona texto en el editor), eliminamos cualquier temporizador existente conclearTimeout
y obtenemos elselectedText
utilizando el métodogetValueInRange()
. SiselectedText
no es una cadena vacía, establecemos un nuevo temporizador consetTimeout
y pasamos una función que llama aaction(selectedText)
como primer argumento. Si el texto seleccionado es una cadena vacía, simplemente registramos ‘limpiado’.Con esta implementación, cuando el texto seleccionado cambia dentro de los 3 segundos, se eliminará el temporizador existente y se establecerá uno nuevo. De lo contrario, la función
action
se llamará con el texto seleccionado después de 3 segundos.Nota: si estás trabajando con un componente de clase, puedes definir
editor
ytimeoutId
como propiedades de la clase y usar funciones de flecha para vincularthis
al controlador de eventos de la siguiente manera:Aquí,
editor
ytimeoutId
se definen como propiedades de la clase, yaction
yhandleSelectionChange
son métodos de clase definidos utilizando funciones de flecha para vincularthis
a la instancia de la clase. El componenteMyEditor
se puede usar como cualquier otro componente de React.