자바스크립트 엔진이 스레드를 오랫동안 독점하여 발생하는 랙 현상 해결_javascript 스킬

Javascript 엔진의 단일 스레드 특성으로 인해 대규모 루프 순회를 처리할 때 스레드가 오랫동안 독점되어 다른 이벤트(예: 사용자 작업)에 적시에 응답할 수 없게 됩니다. 심한 경우 정지되거나 애니메이션이 중단되는 경우도 있습니다. 위의 문제를 해결하기 위해 실행 가능한 메커니즘은 큰 루프를 여러 개의 작은 루프 세그먼트로 분할하고 이를 슬라이스로 실행하여 Javascript 엔진이 각 세그먼트 사이에 다른 것을 삽입하고 실행할 수 있는 기회를 갖게 하여 효과적으로 개선하는 것입니다. 공연체험

Ansync.js

코드 복사 코드는 다음과 같습니다.

함수 Ansync(totalCount, SegmentCount, workCallback, returnCallback)
{
    var num_of_item_for_each_segment = 세그먼트 개수;
    var num_of_segment = Math.ceil(totalCount / num_of_item_for_each_segment);
    var count_of_segment = 0;
    변수 타이머;
    var 시작, 끝;
    this.process = 함수(범위, 시간 초과)
    {
        if (범위 != 정의되지 않음)
        {
            workCallback = workCallback.bind(scope);
            returnCallback = returnCallback ? returnCallback.bind(scope) : 정의되지 않음;
        }
        if (세그먼트 개수 == 세그먼트 개수)
        {
            ClearTimeout(타이머);
            if (returnCallback != 정의되지 않음)
                returnCallback();
        }
        그 외
        {
            start = count_of_segment * num_of_item_for_each_segment;
            end = Math.min(totalCount, (count_of_segment 1) * num_of_item_for_each_segment);
            if (num_of_segment == 1)//타이머를 생성할 필요가 없습니다
            {
                workCallback(시작, 끝);
                count_of_segment = 1;
                this.process();
            }
            그 외
            {
                타이머 = setTimeout(function ansyncTimeout(){
                    if (workCallback(start, end)) //함수가 true를 반환하면 프로세스를 종료합니다
                    {
                        count_of_segment = num_of_segment;
                    }
                    그 외
                    {
                        세그먼트 개수 ;
                    }
                    this.scope.process();
                }.bind({scope: this}),timeout == 정의되지 않음 ? Ansync.TimeOut : 시간 초과);
            }
        }
    }
}
Ansync.TimeOut = 5;

방법은 다음과 같습니다.