中止 Dexie.js 查询

Question

In my application, the user specifies some part of the query. I react immediately after the user changes something in the query. On large data sets, this is a problem - the query can take about 2 seconds to complete and sometimes the users apply additional constraints before the query completes, thus a new query is created and consequently the users overwhelm the system by applying too many queries simultaneously. When multiple queries run, even the 2-second query becomes 30 seconds query. This is a pathological corner-case and it is not desirable for the users to have an extra button to fire the query once they specify all parameters.

Is there a possibility in Dexie to cancel the query before it is finished? I would like to cancel the previous query when the user specifies a new one.

Answer 1

Transactions can be aborted. I haven't tested, but one way should be if you open every query in a transaction and store the transaction in a state so you cane abort the previous transaction when a new one is about to fire.

function cancellableDexieQuery(includedTables, querierFunction) {
  let tx = null;
  let cancelled = false;
  const promise = db.transaction('r', includedTables, () => {
    if (cancelled) throw new Dexie.AbortError('Query was cancelled');
    tx = Dexie.currentTransaction;
    return querierFunction();
  });
  return [
    promise,
    () => {
      cancelled = true; // In case transaction hasn't been started yet.
      if (tx) tx.abort(); // If started, abort it.
      tx = null; // Avoid calling abort twice.
    }
  ];
}

Then as an example of using this helper function:

const [promise1, cancel1] = cancellableDexieQuery(
  "friends",
  ()=>db.friends.where('name').startsWith('A').toArray()
);

cancel1(); // Cancel the operation we just started.

const [promise2, cancel2] = cancellableDexieQuery(
  "friends",
  ()=>db.friends.where('name').startsWith('B').toArray()
);

promise1.catch(error => {
  // Expect a Dexie.AbortError
}

promise2.then(result => {
  // Expect the array as result
});

Disclaimber: I haven't tested this code and it's just dry-coded. Please reply about whether it is a working solution if you try this out or if there are any typos in the code snippets.