[jquery] JavaScript console.log가 오류를 발생시킵니다. "주 스레드에서 동기 XMLHttpRequest가 사용되지 않습니다…"

Firefox 디버거를 사용하지 않고 다른 변수의 상태를 확인하기 위해 콘솔에 로그를 추가했습니다.

그러나 많은 장소에서하는 난이 추가 console.log내에서 main.js파일, 나 자신에 대신 내 사랑스러운 작은 손으로 쓴 메시지의 다음과 같은 오류가 나타납니다

기본 스레드의 동기 XMLHttpRequest는 최종 사용자의 경험에 해로운 영향으로 사용되지 않습니다. 도움이 더 필요하면 http://xhr.spec.whatwg.org/

console.log이 오류를 발생시키지 않는 코드 사용에 어떤 대안이나 래퍼를 추가 할 수 있습니까?

“잘못하고 있습니까?”

답변

이것은 게으르고 있었고 반환되는 내용의 일부로 스크립트 태그를 포함했을 때 나에게 일어났습니다. 따라서 :

부분 HTML 내용 :

<div>
 SOME CONTENT HERE
</div>
<script src="/scripts/script.js"></script>

적어도 내 경우에는 xhr을 통해 HTML 콘텐츠를 반환하면 jQuery가 해당 스크립트를 가져 오기 위해 호출하게됩니다. 이 호출은로드를 계속하려면 스크립트가 필요하다고 가정하기 때문에 비동기 플래그가 false로 발생합니다.

이와 같은 상황에서는 일종의 바인딩 프레임 워크를 조사하고 JSON 객체를 반환하거나 백엔드 및 템플릿에 따라 스크립트로드 방법을 변경할 수 있습니다.

jQuerygetScript() 를 사용 하여 관련 스크립트를 가져올 수도 있습니다 . 여기에 바이올린이 있습니다. jQuery 예제의 간단한 사본이지만 스크립트가로드 될 때 경고가 표시되지 않습니다.

예

<script>
var url = "/scripts/script.js";
$.getScript(url);
</script>

http://jsfiddle.net/49tkL0qd/

답변

비동기 플래그가 false로 설정된 주 스레드 내의 XMLHttpRequest 요청으로 인해 경고 메시지가 발생할 수 있습니다.

https://xhr.spec.whatwg.org/#synchronous-flag :

작업자 외부의 동기 XMLHttpRequest는 최종 사용자의 경험에 해로운 영향을 미치므로 웹 플랫폼에서 제거되고 있습니다. (이 과정은 오랜 시간이 걸린다.) JavaScript 전역 환경이 문서 환경 인 경우 개발자는 비동기 인수에 대해 false를 전달해서는 안된다. 사용자 에이전트는 개발자 도구에서의 이러한 사용에 대해 경고 할 것을 강력히 권장하며 InvalidAccessError 예외가 발생하면이를 실험 해 볼 수 있습니다.

미래의 방향은 작업자 스레드에서만 XMLHttpRequests를 허용하는 것입니다. 메시지는 그러한 영향을 경고하기위한 것입니다.

답변

나는 또한 같은 문제에 직면했지만 async : true를 넣어서 해결할 수 있습니다. 나는 그것이 기본적으로 사실이라는 것을 알고 있지만 명시 적으로 쓸 때 작동합니다.

$.ajax({
   async: true,   // this will solve the problem
   type: "POST",
   url: "/Page/Method",
   contentType: "application/json",
   data: JSON.stringify({ ParameterName: paramValue }),
});

답변

Visual Studio 2015/2017의 라이브 디버거에서 더 이상 사용되지 않는 호출이 포함 된 코드를 주입하고 있습니다.

답변

때때로 아약스는 스크립트를로드해야하지만 문서 준비는 지연 스크립트가로드 될 때까지 될 수 있습니다.

jQuery는이 holdReady()기능을 지원 합니다.

사용법 예 :

$.holdReady(true);                              //set hold
function releaseHold() { $.holdReady(false); }  //callback to release hold
$.getScript('script.js', releaseHold);          //load script then release hold

실제 스크립트 로딩은 비동기 적이지만 ( 오류 없음 ) 문서의 준비가 완료된 후 나머지 JavaScript가 실행되면 효과는 동기화됩니다 .

이 고급 기능 은 일반적으로 DOM이 준비되어 있어도 ready 이벤트가 발생하기 전에 jQuery 플러그인과 같은 추가 JavaScript를로드하려는 동적 스크립트 로더에서 사용됩니다.

설명서 :
https://api.jquery.com/jquery.holdready

업데이트 2019 년 1 월 7 일

에서 JQMIGRATE :

jQuery.holdReady ()는 더 이상 사용되지 않습니다

원인 :jQuery.holdReady() 방법은 페이지의 글로벌 성능에 미치는 해로운 영향으로 인해 더 이상 사용되지 않습니다. 이 방법을 사용하면 페이지의 모든 코드가 장시간 초기화되지 않을 수 있습니다.

솔루션 : 모든 jQuery 준비 핸들러가 지연되지 않도록 페이지를 다시 작성하십시오. 예를 들어 실행이 안전 할 때 지연이 필요한 코드 만 늦게로드하여이를 수행 할 수 있습니다. 이 방법의 복잡성으로 인해 jQuery Migrate는 기능을 채우려 고 시도하지 않습니다. jQuery Migrate와 함께 사용되는 jQuery의 기본 버전에 더 이상 jQuery.holdReady()코드가 포함되어 있지 않으면 이 경고가 나타난 직후 코드가 실패합니다.

답변

이 경고를 피하려면 다음을 사용하지 마십시오.

async: false

$ .ajax () 호출 중 하나. 이것은 더 이상 사용되지 않는 XMLHttpRequest의 유일한 기능입니다.

디폴트는

async: true

jQuery는 동기 XMLHTTPRequest를 더 이상 사용하지 않습니다.

답변

@Webgr 부분 답변은 실제로 콘솔 로그 에서이 경고를 디버깅하는 데 도움이되었습니다. 답의 다른 부분은 너무 많은 다운 투표를 가져 왔습니다.

어쨌든, 여기 내 경우 에이 경고의 원인이 무엇인지 어떻게 알 수 있습니까?

Chrome 브라우저> Hit F12를 사용하여 DevTools 가져 오기
서랍 메뉴를 엽니 다 (오른쪽 상단의 Chrome 3 세로 점)
콘솔 아래에서 로그 XMLHttpRequests 확인 옵션
오류가 발생한 페이지를 다시로드하고 콘솔 로그의 각 ajax 요청에서 발생하는 상황을 관찰하십시오.

제 경우에는 다른 플러그인이 2 개의 .js 라이브러리를 로드했습니다. 각 ajax 호출 후 하고 있었으며 절대 필요하지는 않았습니다. 악성 플러그인을 비활성화하면 로그에서 경고가 제거되었습니다. 이 시점에서 문제를 직접 해결하거나 (예 : 특정 페이지 나 이벤트에 대한 스크립트로드 제한-여기에 대한 답변이 너무 구체적 임) 타사 플러그인 개발자에게 문의하여 문제를 해결할 수 있습니다.

이것이 누군가를 돕기를 바랍니다.