Me gustaría configurar un temporizador para la función de 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 área de juegos https://microsoft.github.io/monaco-editor/playground.html , no funcionó. Cuando cambié el texto seleccionado muy rápidamente, 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 != "") { // if we are already in this event, the selected text must change myTimeout = setTimeout(action(selectedText), 3000); console.log("set", myTimeout, selectedText) } })Edición 1: mi componente es un componente de clase, por lo que no puedo usar llamadas de enlace.
Puede usar el debounce lodash lograr el efecto que desea. Y use useCallback para asegurarse de obtener la misma instancia de función. Creo que una implementación como esta podría funcionar:
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); } })Usé esto como referencia.
setTimeout toma la función como entrada, mientras la haya llamado. Creo que el siguiente código funciona bien.
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); } })