在 JavaScript 中可視化模式匹配

Question

我有一個與 function 匹配的簡單模式，我正在嘗試減慢每個比較的執行速度，以便為它創建一個可視化器。 但是，我希望能夠在 function 之外訪問我的 i 和 j 變量。 我試圖通過在 function 之外聲明它們，將它們傳入並在每場比賽后返回它們來做到這一點。 這樣我可以按一個按鈕來控制執行流程。 但是，它們沒有正確返回，我懷疑這與我使用 async/await 有關，並且需要將值作為 Promise 返回。

https://codesandbox.io/s/staging-http-0zm04?file=/src/App.tsx:0-1072

import React, { useState } from "react";
import "./styles.css";


const delay = (ms) => new Promise((resolve, reject) => setTimeout(resolve, ms));

export const naive = async (text: string, pattern: string, i: number, j: number) => {
    const matches = [];
    let n = text.length;
    let m = pattern.length;
    while (i < n){
        while (j < pattern.length && pattern[j] === text[i + j]){
            j += 1;
            await delay(500);
        }
        if (j === m){
            matches.push(i)
        }
        return [i, j, matches]
    }
}

export default function App() {

    const [text, setText] = useState<string>("abcdefghijklmnopqrstuvwxyzabcd")
    const [pat, setPat] = useState<string>("abc")
    const [i, updateI] = useState(0);
    const [j, updateJ] = useState(0);

    const nextMatch = () => {
      let results = naive(text, pat, i, j);
      updateI(results[0]);
      updateJ(results[1]);
  }

  return (
    <div>
    <button style = {{width: "100px", height: "50px"}}onClick = {() => nextMatch()}/>
      {i}
      {j}
    </div>
  );
}

Answer 1

由於 navie 是異步 function 你必須添加then 。這將有助於返回正確的 i 和 j 值

 const nextMatch = () => { naive(text, pat, i, j).then((results) => { updateI(results[0]); updateJ(results[1]); }); };