我想為該action功能設定一個計時器。規則是：當所選文本不會更改3秒鐘后，我們將action使用所選文本運行函式。
我在操場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：我的組件是一個類組件，所以我不能使用鉤子呼叫。
uj5u.com熱心網友回復：
您可以使用lodash'sdebounce來達到您想要的效果。并使用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);
}
})
我以此作為參考。
uj5u.com熱心網友回復：
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);
}
})
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/399848.html
標籤：javascript 反应 洛达什 摩纳哥编辑
上一篇：如何在React.js中創建延遲