집 > 기사 > 웹 프론트엔드 > js ajax 동기화 요청으로 인해 발생하는 브라우저 정지 애니메이션 문제를 해결하는 방법은 무엇입니까?

js ajax 동기화 요청으로 인해 발생하는 브라우저 정지 애니메이션 문제를 해결하는 방법은 무엇입니까?

小云云원래의: 2018-01-19 09:03:372025검색

이 글은 주로 js ajax 동기화 요청으로 인해 발생하는 브라우저 정지 애니메이션 문제를 해결하기 위한 글을 공유합니다. 좋은 참고 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

1. 문제의 원인

오늘 요청을 하던 중, 사용자의 개인 센터에 버튼을 클릭하면 사용자의 현재 포인트를 새로 고칠 수 있는 기능이 있는 상황이 발생했습니다. ajax 동기요청 활용 당시에는 클릭, 클릭, 3, 5, 2로 나누기를 해봤습니다. 대략적인 코드는 다음과 같습니다.

/**
  * 异步当前用户积分 by zgw 20161216
  * @return {[type]} [description]
 */
 function flushIntegralSum() {
　　　　　//点击按钮刷新前修改按钮的文案，已经去掉点击事情，防止多次点击
  $("#flushbutton").replaceWith('<a style="color:#3fb0ff;font-size:14px;" href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="flushbutton">正在刷新</a>');
  $.ajax({
   url:'URL',
   type:'post',
   async:false,
   // data:{},
   success:function(json){
    json = eval('('+json+')');
    if(json.url){window.location.href=json.url;return;}
    $("#flushbutton").replaceWith('<a style="color:#3fb0ff;font-size:14px;" href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="flushFreeSum();" id="flushbutton">刷新积分</a>');
    if(json.code!=1){
     alert(json.msg);
    }else{
     $("#free_sum").html(json.free_sum);
    }
    return;
   }
  });
 }

이렇게 간단한 함수만 쓰면 괜찮을 것 같았습니다. 그런데 작업 중 문제가 발생했습니다. 사용자가 포인트 새로 고침 버튼을 클릭하면 복사본이 "새로 고침"으로 수정되지 않았지만 ajax 요청이 전송되었으므로 웹 페이지 코드를 확인한 결과 js가 실제로 onclick을 제거한 것으로 나타났습니다. 요청이 성공한 후 원본으로 다시 변경되었지만 페이지의 카피라이팅은 변경되지 않았는데 당시에는 HTML 코드가 왜 있는지 모르겠습니다. 2. 문제의 원인을 파악합니다

문제의 근본 원인: 당시 문제 해결을 수행한 결과 "async: false" 문제라는 것을 발견했습니다. 비동기 요청으로 대체하면 문제가 없습니다. 그렇다면 왜 동기 요청으로 인해 코드 오류가 발생합니까?

원인: 브라우저의 렌더링(UI) 스레드와 js 스레드는 상호 배타적입니다. js 시간이 많이 걸리는 작업을 실행하면 페이지 렌더링이 차단됩니다. 비동기 ajax를 실행할 때는 문제가 없지만 동기 요청으로 설정하면 다른 작업(ajax 함수 뒤의 코드 및 렌더링 스레드)이 중지됩니다. 요청이 시작되기 전의 문장에 DOM 작업 명령문이 있더라도 이 동기화 요청은 실행할 시간을 주지 않고 UI 스레드를 "빠르게" 차단합니다. 이것이 코드가 실패하는 이유입니다.

3. 문제 해결

1. 문제를 해결하기 위해 ajax 코드를 넣고 브라우저가 스레드를 다시 시작하도록 하여 문제를 해결했습니다. setTimeout의 첫 번째 부분 두 매개변수가 0으로 설정되면 브라우저는 설정된 최소 시간 후에 이를 실행합니다. 여기서 문제는 해결되었지만 버튼을 클릭하면 gif 이미지가 팝업되도록 시도할 수 있습니다. 회전하면 프롬프트가 업데이트됩니다. 그림이 표시되지만 이동하지 않는 이유는 동기화 요청이 지연되더라도 실행 중에 UI 스레드가 계속 차단되기 때문입니다. 이 차단 기능은 정말 대단해서 gif 이미지조차 움직이지 않고 정지된 이미지처럼 보입니다. 결론은 분명합니다. SetTimeout은 증상을 처리하지만 근본 원인을 처리하지는 않습니다. 이는 동기화 요청을 "약간" 비동기화하는 것과 동일하며 여전히 동기화 악몽에 빠져 스레드를 차단합니다. 요청을 보내기 전에 짧은 작업

2. 문제를 해결하려면 Deferred를 사용하세요

js ajax 동기화 요청으로 인해 발생하는 브라우저 정지 애니메이션 문제를 해결하는 방법은 무엇입니까?

관련 기사