jQuery.ajax ()에서“async : false”는 무엇입니까?

256

특히, 기본 ( async: true) 과 어떻게 다릅니 까?

어떤 상황에서 나는 명시 적으로 설정하려는 것 async까지 false, 그리고 발사에서 페이지에 다른 이벤트를 방지과 함께 할 수있는 뭔가가 무엇입니까?

jquery 
— 조 디
소스
— CSharpAtl
예, 비동기
— 적이 지
비동기는 스크립트가 서버에 요청을 보내고 응답을 기다리지 않고 계속 실행 함을 의미합니다. 응답이 수신되는 즉시 브라우저 이벤트가 발생하여 스크립트가 연관된 조치를 실행할 수 있습니다.
— SagarPPanchal

답변:

300

페이지의 다른 이벤트가 실행되지 않도록하는 것과 관련이 있습니까?

예.

async를 false로 설정하면 함수의 다음 명령문을 호출하기 전에 호출중인 명령문이 완료되어야합니다. async : true로 설정하면 해당 명령문이 실행을 시작하고 비동기 명령문이 아직 완료되었는지 여부에 관계없이 다음 명령문이 호출됩니다.

자세한 내용은 jQuery ajax success 익명 함수 범위를 참조하십시오.

— 숀 비에이라
소스
12
JavaScript가 스레드되지 않았기 때문에 이것이 어떻게 달성되었는지 항상 궁금했습니다.
— Matt
4
@ L.DeLeo-아니오, 전혀 지연되지는 않습니다. 비동기 함수 호출의 복잡성을 관리하는 또 다른 방법입니다 . async: false 호출에서 비동기 성을 완전히 제거합니다 . ajax 블록 호출 -다음에 오는 코드는 서버가 응답 할 때까지 실행되지 않습니다.
— Sean Vieira
14
이는 또한 브라우저가 아약스가 실행되는 동안 발생하는 이벤트를 캡처 / 트리거하지 않음을 의미합니다. Firefox가 클릭 이벤트를 유발하지 않는 이유를 알아 내려고 어려운 방법을 찾았습니다. 다음 동기화 호출로 인해 차단 된 "강제"흐림 이벤트 때문인 것으로 나타났습니다.
— PålOliver
3
@ 매트 아니 그것은 더 이상 없습니다 (^^) w3schools.com/html/html5_webworkers.asp
— borrel
5
그것은 async: false죽은 것 , 나는 그것을 시도하고있어18:17:49.384 Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user’s experience. For more help http://xhr.spec.whatwg.org/ 1 jquery.js:9061:4
— Aba
120
  • async:false= 코드가 일시 중지되었습니다 . ( 이 코드가 끝나기 를 기다리는 다른 코드 )
  • async:true= 코드가 계속되었습니다 . (아무것도 멈추지 않습니다. 다른 코드는 기다리지 않습니다 .)

이처럼 간단합니다.

— 夏 期 劇場
소스
매우 일반적인 "코드 나머지", 일시 중지되는 코드 범위를 설명합니다.
— bart
26

Async:False나머지 코드의 실행을 보류합니다. 일단 ajax의 응답을 받으면 나머지 코드가 실행됩니다.

— 모 히트
소스
18

비동기 검색을 비활성화하면 요청이 이행 될 때까지 스크립트가 차단됩니다. 비동기 콜백이 더 깨끗하다는 것을 알지만 알려진 순서로 요청 시퀀스를 수행하는 데 유용합니다.

— 존 밀리 킨
소스
Joe : 백그라운드에 작업자 스레드가 있는지 여부에 따라 다릅니다.
— John Millikin
10

한 가지 사용 사례는 ajax사용자가 창을 닫거나 페이지를 떠나기 전에 전화를 거는 것입니다. 사용자가 다른 사이트로 이동하거나 브라우저를 닫기 전에 데이터베이스에서 일부 임시 레코드를 삭제하는 것과 같습니다.

 $(window).unload(
        function(){
            $.ajax({
            url: 'your url',
            global: false,
            type: 'POST',
            data: {},
            async: false, //blocks window close
            success: function() {}
        });
    });
— 토니
소스
51
자바 스크립트가
— 많지 않아
완전히 관련이없는 것에 대해 async false가 필요했지만 페이지에서 정의되지 않은 것으로 채우기 전에 스크립트가 XML 파일에서 값을 가져갈 수 있기 때문에 문제가 해결되었습니다.
— J_L
8

에서

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

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

— i474232898
소스
8

async를 false로 설정하면 ajax 요청 다음의 지시 사항은 요청이 완료 될 때까지 기다려야 함을 의미합니다. 다음은 코드가 제대로 작동하기 위해 async를 false로 설정해야하는 경우입니다.

var phpData = (function get_php_data() {
  var php_data;
  $.ajax({
    url: "http://somesite/v1/api/get_php_data",
    async: false, 
    //very important: else php_data will be returned even before we get Json from the url
    dataType: 'json',
    success: function (json) {
      php_data = json;
    }
  });
  return php_data;
})();

위의 예는 async : false 사용법을 명확하게 설명합니다 .

그것을 false로 설정함으로써, 우리는 일단 데이터가 url 에서 검색되고, 그 후에 php_data 가 반환 된 후에 만 확인 되도록했다; 라는

— 가혹한 굽타
소스
다른 사람이 나와 같은 문제를 겪을 경우를 대비하여 :이 답변은 return php_data명령문이 성공 함수에있을 수 없지만 $.ajax()함수 외부에 있어야 함을 강조 합니다. 나는 return php_data내부에 해당하는 것을 success: function(){}
— 넣었고
0

이 옵션 10 진수를 사용하십시오 : 3

여기 URL이 있습니다 : https://demos.telerik.com/kendo-ui/numerictextbox/index

<!DOCTYPE html>
<html>
<head>
    <base href="https://demos.telerik.com/kendo-ui/numerictextbox/index">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.default-v2.min.css" />

    <script src="https://kendo.cdn.telerik.com/2019.3.1023/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2019.3.1023/js/kendo.all.min.js"></script>


</head>
<body>

        <div id="example">
            <div id="add-product" class="demo-section k-content">
                <p class="title">Add new product</p>
                <ul id="fieldlist">
                    <li>
                        <label>
                            Price:
                            <input id="currency" type="number" title="currency" value="30" min="0" max="100" style="width: 100%;" />
                        </label>
                    </li>
                    <li>
                        <label>
                            Price Discount:
                            <input id="percentage" value="0.05" title="percentage" style="width: 100%;" />
                        </label>
                    </li>
                    <li>
                        <label>
                            Weight:
                            <input id="custom" value="2" title="custom" style="width: 100%;" />
                        </label>
                    </li>
                    <li>
                        <label>
                            Currently in stock:
                            <input id="numeric" type="number" title="numeric" value="17" min="0" max="100" step="1" style="width: 100%;" />
                        </label>
                    </li>
                </ul>
            </div>


            <script>
                $(document).ready(function() {
                    // create NumericTextBox from input HTML element
                    $("#numeric").kendoNumericTextBox();

                    // create Curerncy NumericTextBox from input HTML element
                    $("#currency").kendoNumericTextBox({
                        format: "c",
                        decimals: 3
                    });

                    // create Percentage NumericTextBox from input HTML element
                    $("#percentage").kendoNumericTextBox({
                        format: "p0",
                        min: 0,
                        max: 0.1,
                        step: 0.01
                    });

                    // create NumericTextBox from input HTML element using custom format
                    $("#custom").kendoNumericTextBox({
                        format: "#.00 kg"
                    });
                });
            </script>

            <style>
                .demo-section {
                    padding: 0;
                }

                #add-product .title {
                    font-size: 16px;
                    color: #fff;
                    background-color: #1e88e5;
                    padding: 20px 30px;
                    margin: 0;
               }

               #fieldlist {
                   margin: 0 0 -1.5em;
                   padding: 30px;
               }

               #fieldlist li {
                   list-style: none;
                   padding-bottom: 1.5em;
               }

               #fieldlist label {
                   display: block;
                   padding-bottom: .6em;
                   font-weight: bold;
                   text-transform: uppercase;
                   font-size: 12px;
               }

               #fieldlist label .k-numerictextbox {
                   font-size: 14px;
               }
            </style>

        </div>


</body>
</html>
— 사미르 라 카니
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.