refactor: use debounce and counter to avoid race conditions

packages/nc-gui/components/smartsheet/column/FormulaOptions.vue

@@ -85,27 +85,47 @@ if ((column.value?.colOptions as any)?.formula_raw) {
 
 const source = computed(() => activeBase.value?.sources?.find((s) => s.id === meta.value?.source_id))
 
-const parsedTree = ref({
+const parsedTree = ref<any>({
   dataType: FormulaDataTypes.UNKNOWN,
 })
 
-watch(
-  () => vModel.value.formula || vModel.value.formula_raw,
-  async () => {
-    try {
-      const parsed = await validateFormulaAndExtractTreeWithType({
-        formula: vModel.value.formula || vModel.value.formula_raw,
-        columns: (meta.value?.columns || []).slice(),
-        column: column.value ? { ...column.value } : undefined,
-        clientOrSqlUi: source.value?.type as any,
-        getMeta: async (modelId) => await getMeta(modelId),
-      })
+// Initialize a counter to track watcher invocations
+let watcherCounter = 0
+
+// Define the debounced async validation function
+const debouncedValidate = useDebounceFn(async () => {
+  // Increment the counter for each invocation
+  watcherCounter += 1
+  const currentCounter = watcherCounter
+
+  try {
+    const parsed = await validateFormulaAndExtractTreeWithType({
+      formula: vModel.value.formula || vModel.value.formula_raw,
+      columns: (meta.value?.columns || []).slice(),
+      column: column.value ? { ...column.value } : undefined,
+      clientOrSqlUi: source.value?.type as any,
+      getMeta: async (modelId) => await getMeta(modelId),
+    })
+
+    // Update parsedTree only if this is the latest invocation
+    if (currentCounter === watcherCounter) {
       parsedTree.value = parsed
-    } catch (e) {
+    }
+  } catch (e) {
+    // Update parsedTree only if this is the latest invocation
+    if (currentCounter === watcherCounter) {
       parsedTree.value = {
         dataType: FormulaDataTypes.UNKNOWN,
       }
     }
+  }
+}, 300)
+
+// Watch the formula inputs and call the debounced function
+watch(
+  () => vModel.value.formula || vModel.value.formula_raw,
+  () => {
+    debouncedValidate()
   },
 )