Ajax 동기화 작업 중 브라우저 정지 애니메이션(자세한 튜토리얼)
- 亚连원래의
- 2018-06-11 14:56:481432검색
아래에서는 js ajax 동기화 요청으로 인해 발생하는 브라우저 정지 애니메이션 문제를 해결하는 기사를 공유하겠습니다. 이는 좋은 참고 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다.
1. 문제의 원인
오늘 요청을 해보니 사용자 개인센터에 버튼을 누르면 현재 포인트를 갱신할 수 있는 기능이 있습니다. 확실히 Ajax 동기화 요청을 사용해야 합니다. 그 당시 저는 클릭, 클릭, 5로 나누고 코드는 대략 다음과 같습니다.
/**
* 异步当前用户积分 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가 실제로 copy 및 html 요소에 바인딩된 onclick 이벤트를 제거하고 요청이 성공한 후 다시 원본으로 변경했음을 발견했지만 당시에는 페이지의 카피라이팅이 변경되지 않았습니다. HTML 코드가 왜 변경되었는지는 알 수 없지만 페이지는 변경되지 않았습니다. 2. 문제의 원인을 파악합니다.
문제의 원인: 당시 문제 해결을 수행한 결과 최종적으로 문제가 발생한 것으로 나타났습니다. "async:false" 문제입니다. 비동기식으로 대체되면 문제가 없습니다. 그러면 동기식 요청으로 인해 코드 오류가 발생하는 이유는 무엇입니까? 이유:
브라우저의 렌더링(UI) 스레드와 js 스레드는 상호 배타적입니다. js 시간이 많이 걸리는 작업을 실행하면 페이지 렌더링이 차단됩니다. 비동기 ajax를 실행할 때는 문제가 없지만 동기 요청으로 설정하면 다른 작업(ajax 함수 뒤의 코드 및 렌더링 스레드)이 중지됩니다. 요청이 시작되기 전의 문장에 DOM 작업 명령문이 있더라도 이 동기화 요청은 실행할 시간을 주지 않고 UI 스레드를 "빠르게" 차단합니다.
이것이 코드가 실패하는 이유입니다. 3. 문제 해결
1. 문제를 해결하기 위해 ajax 코드를 sestTimeout에 넣고 브라우저가 작동하도록 했습니다. : 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>');
setTimeout(function(){
$.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;
}
});
},0)
}
setTimeout의 두 번째 매개변수는 0으로 설정되어 있고 설정된 최소 시간 후에 브라우저가 이를 실행합니다.
여기서는 문제가 해결되었지만 다음과 같은 경우 버튼을 클릭하면 팝업이 나타나도록 시도할 수 있습니다. gif 이미지가 필요하며, 이미지가 회전하고 있어 업데이트 중임을 나타냅니다. 이미지가 표시되지만 이미지가 이동하지 않는 것은 동기화 요청이 지연되기 때문입니다. 실행 블록 중에도 UI 스레드로 전송됩니다. 이 차단 기능은 정말 대단해서 gif 이미지조차 움직이지 않고 정적인 이미지처럼 보입니다. 결론은 분명합니다. SetTimeout은 증상을 처리하지만 근본 원인을 처리하지는 않습니다. 이는 동기화 요청을 "약간" 비동기화하는 것과 같습니다. 그러면 여전히 동기화 문제가 발생하고 스레드가 차단됩니다. 2.
Deferred
를 사용하여 해결하세요. 위 내용은 제가 모든 사람을 위해 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다. 관련 기사:
Vue에서 사용자 정의 지침을 구현하는 방법은 무엇입니까?vue의 상위 구성 요소를 통해 하위 구성 요소 스타일을 수정하는 방법
vue-resource의 jsonp 도메인 간 문제에 관해
vue+webpack에서 비동기 구성 요소 로딩을 구현하는 방법은 무엇입니까?
vue.js에서 Nginx를 사용하여 도메인 간 문제 해결
JavaScript에서 최대 공통 하위 문자열을 달성하는 방법
Node.js에서 mysql 트랜잭션 자동 재활용 연결을 구현하는 방법
위 내용은 Ajax 동기화 작업 중 브라우저 정지 애니메이션(자세한 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!