js-coroutines를 사용하여 60fps로 입력하면서 검색

사용자가 목표를 달성하기 위해 최소한의 클릭이 필요한 사용자 인터페이스를 만들 수 있다는 것은 좋은 일입니다. 예를 들어 입력할 때 목록을 검색하고 싶을 수 있습니다. 그러나 문제는 목록이 커질수록 JavaScript가 애니메이션을 중지하고 전체 경험을 결함으로 만드는 기본 스레드를 잡아먹기 때문에 전체 사용자 경험이 저하될 가능성이 있다는 것입니다.

이 문서에서는 사용할 표준 검색 기능js-coroutines을 빠르게 수정하고 약간의 추가 노력으로 완벽한 반응형 환경을 유지하는 방법을 보여줍니다.

1,000,000개 항목의 목록이 있고 텍스트 상자가 있다고 가정해 보겠습니다. 사용자가 입력할 때 입력한 단어와 일치하는 단어가 있는 처음 50개의 항목을 반환하려고 합니다(순서 상관 없음).

이 예에서는 "unique-names-generator"를 사용하여 검색할 넌센스 목록을 만듭니다! 항목은 다음과 같이 표시됩니다.

Aaren the accused lime flyingfish from Botswana
Adriana the swift beige cuckoo from Botswana

검색 기능은 매우 간단합니다.

function find(value) {
    if (!value || !value.trim()) return []
    value = value.trim().toLowerCase()
    const parts = value.split(" ")
    return lookup
        .filter(v =>
            parts.every(p =>
                v.split(" ").some(v => v.toLowerCase().startsWith(p))
            )
        )
        .slice(0, 50)
}

그러나 1,000,000개의 항목이 있는 경우 경험은 매우 비참합니다. 아래 화면에서 내가 가장 좋아하는 요리인 '올빼미 레어'를 검색해 보고 애니메이션 진행률 원 글리치를 보세요...



이 경험은 끔찍하며 기능을 제거하거나 훨씬 더 나은 검색 방법을 찾아야 합니다.

js-coroutines 구조에!

js-coroutine을 사용하면 filterAsync 메서드를 가져오고 "find"를 비동기식으로 다시 작성할 수 있습니다.

let running = null
async function find(value, cb) {
    if (running) running.terminate()
    if (!value || !value.trim()) {
        cb([])
        return
    }
    value = value.trim().toLowerCase()
    let parts = value.split(" ")
    let result = await (running = filterAsync(
        lookup,

        v =>
            parts.every(p =>
                v.split(" ").some(v => v.toLowerCase().startsWith(p))
            )
    ))
    if (result) {
        cb(result.slice(0, 50))
    }
}

여기에서 값이 변경될 때 현재 실행 중인 검색을 종료하고 콜백을 추가하고 함수를 비동기로 만든 것을 볼 수 있습니다.

결과가 훨씬 좋습니다.