sourcecode

최대 콜 스택사이즈가 에러를 넘었습니다.

copyscript 2022. 9. 23. 00:05
반응형

최대 콜 스택사이즈가 에러를 넘었습니다.

DWR(Direct Web Remoteing) JavaScript 라이브러리 파일을 사용하고 있으며 Safari(데스크탑 및 iPad)에서만 오류가 발생합니다.

라고 쓰여 있다

최대 콜 스택사이즈를 넘었습니다.

이 오류는 정확히 무엇을 의미하며 처리를 완전히 중지합니까?

,, 음음 for for for for for의 도 가능Safari는 「」( 「」)에 .iPad Safari 써있어요.

실행이 타임아웃을 초과했습니다.

같은 콜 스택의 문제라고 상정하고 있습니다).

즉, 콜 스택의 제한에 도달할 때까지 코드 내 어딘가에 함수를 호출하고, 그 함수는 다른 함수를 호출합니다.

이는 거의 항상 베이스 케이스가 충족되지 않는 재귀 함수 때문입니다.

스택 표시

이 코드를 고려하십시오.

(function a() {
    a();
})();

몇 번 콜을 한 후의 스택은 다음과 같습니다.

웹 인스펙터

보시는 바와 같이 콜스택은 브라우저의 하드코드된 스택사이즈 또는 메모리 고갈이라는 한계에 도달할 때까지 증가합니다.

이 문제를 해결하려면 재귀 함수에 충족 가능한 기본 케이스가 있는지 확인하십시오.

(function a(x) {
    // The following condition 
    // is the base case.
    if ( ! x) {
        return;
    }
    a(--x);
})(10);

동일한 JavaScript 파일을 실수로 두 번 Import/embedding 했을 때 이 정보를 얻을 수 있습니다.인스펙터의 [Resources]탭에서 확인할 필요가 있습니다.

제 경우 값 대신 입력 요소를 전송했습니다.

$.post( '',{ registerName: $('#registerName') } )

대신:

$.post( '',{ registerName: $('#registerName').val() } )

이로 인해 Chrome 탭이 정지되어 페이지가 응답하지 않을 때 'Wait/Kill' 대화상자도 표시되지 않았습니다.

코드 어딘가에 재귀 루프가 있습니다(즉, 스택이 가득 찰 때까지 자신을 호출하는 함수).

다른 브라우저는 스택이 더 크거나(대신 타임아웃이 발생), 어떤 이유로든 오류를 삼키거나(트라이 캐치를 잘못 배치했을 수 있습니다).

오류가 발생했을 때 디버거를 사용하여 콜스택을 확인합니다.

스택 오버플로우를 검출할 때의 문제는 스택트레이스가 풀려서 실제로 무슨 일이 일어나고 있는지 알 수 없다는 것입니다.

Chrome의 새로운 디버깅 툴이 도움이 되었습니다.

Performance tab 「 」를합니다.Javascript samples활성화 되어 있습니다.이렇게 표시됩니다.

기가가넘넘쳐쳐이이이이이!! ★★★★★★★★★★★★★★★★★★★★」extendObject코드의 정확한 회선 번호를 확인할 수 있습니다.

여기에 이미지 설명 입력

도움이 될 수도 있고 안 될 수도 있는 타이밍이나 속임수도 볼 수 있습니다.

여기에 이미지 설명 입력


수 없을 때 한 또 다른 입니다.console.log문제가 있다고 생각되는 부분에 대한 진술입니다.위의 단계를 통해 이 작업을 수행할 수 있습니다.

Chrome에서는 동일한 데이터를 반복적으로 출력하면 다음과 같이 표시되며 문제가 있는 부분이 더 명확하게 나타납니다.이 예에서는 스택이 최종적으로 크래시하기 전에7152 프레임에 도달했습니다

여기에 이미지 설명 입력

제 경우, 다음과 같은 방법으로 큰 바이트 배열을 문자열로 변환하고 있었습니다.

String.fromCharCode.apply(null, new Uint16Array(bytes))

bytes에는 수백만의 엔트리가 포함되어 있습니다.이것은 너무 커서 스택에 들어갈 수 없습니다.

내 경우 클릭 이벤트가 하위 요소에 전파되었습니다.그래서 나는 다음을 넣어야 했다.

e.stop Propagation()

클릭 이벤트:

 $(document).on("click", ".remove-discount-button", function (e) {
           e.stopPropagation();
           //some code
        });
 $(document).on("click", ".current-code", function () {
     $('.remove-discount-button').trigger("click");
 });

다음은 html 코드입니다.

 <div class="current-code">                                      
      <input type="submit" name="removediscountcouponcode" value="
title="Remove" class="remove-discount-button">
   </div>

, 「」, 「」, 「」의 이 되는 경우가 .Maximum call stack size exceeded 삭제:

var items = [];
[].push.apply(items, new Array(1000000)); //Bad

이쪽도 마찬가지입니다.

items.push(...new Array(1000000)); //Bad

Mozilla Docs에서:

단, 이 방법을 사용하면 JavaScript 엔진의 인수 길이 제한을 초과할 위험이 있습니다.인수가 너무 많은 함수를 적용하면(수만 개 이상의 인수를 생각할 수 있음) 그 결과는 엔진에 따라 달라집니다(JavaScriptCore의 인수 제한은 하드코드 65536).이는 제한(실제로는 과도하게 큰 스택 동작의 성질)이 지정되지 않았기 때문입니다.일부 엔진은 예외를 발생시킵니다.더 치명적인 것은 다른 사용자가 실제로 적용된 함수에 전달되는 인수 수를 임의로 제한한다는 것입니다.후자의 경우를 설명하자면, 이러한 엔진에 4개의 인수의 제한이 있는 경우(물론 실제 한계는 상당히 높음), 이는 마치 완전한 배열이 아닌 위의 예에서 5, 6, 2, 3 인수가 적용되도록 전달된 것과 같습니다.

시험해 보세요.

var items = [];
var newItems = new Array(1000000);
for(var i = 0; i < newItems.length; i++){
  items.push(newItems[i]);
}

Chrome dev 툴바 콘솔에서 오류 세부사항을 확인하여 콜 스택의 기능을 제공하고 오류를 일으킨 재귀로 이동합니다.

내 경우 이름이 같은 변수가 두 개 있습니다!

어떤 이유로 무한 프로세스/재귀가 필요한 경우 별도의 스레드에서 웹 워커를 사용할 수 있습니다.http://www.html5rocks.com/en/tutorials/workers/basics/

돔 요소를 조작하여 다시 그리려면 http://creativejs.com/resources/requestanimationframe/ 애니메이션을 사용하십시오.

여기에서는 거의 모든 답변에서 무한 루프에 의해서만 발생할 수 있다고 합니다.그렇지 않습니다. 그렇지 않으면 깊이 중첩된 콜을 통해 스택을 오버런할 수 있습니다(효율적이라고는 할 수 없지만 확실히 가능한 범위 내에 있습니다).JavaScript VM을 제어할 수 있는 경우 스택 크기를 조정할 수 있습니다.예를 들어 다음과 같습니다.

node --stack-size=2000

다음 항목도 참조하십시오.Node.js의 최대 콜스택 크기를 늘리려면 어떻게 해야 합니까?

최근 작업 중인 관리 사이트에 필드를 추가했습니다. - contact_type...쉽죠?select "type"을 호출하고 jquery ajax 호출을 통해 전송하려고 하면 실패하고 이 오류가 jquery.js에 깊이 묻힙니다.이 작업을 수행하지 마십시오.

$.ajax({
    dataType: "json",
    type: "POST",
    url: "/some_function.php",
    data: { contact_uid:contact_uid, type:type }
});

문제는 type:type-인수에 type이라고 하는 이름을 붙이는 것은 문제없다는 것입니다.이것은 다음과 같이 변경되었습니다.

$.ajax({
    dataType: "json",
    type: "POST",
    url: "/some_function.php",
    data: { contact_uid:contact_uid, contact_type:type }
});

그리고 몇 가지 함수를 다시 썼습니다.이에 따라 php - 문제가 해결되었습니다.

으로는 제엔, 적으, 적는, 적 the, 적 the, 적 the, 적 the, in the, in in, in in, in in, in,valueinput.

틀렸어

let name=document.getElementById('name');
param={"name":name}

맞아요.

let name=document.getElementById('name').value;
param={"name":name}

값 대신 입력 요소를 전송하면 FK가 언급한 것처럼 대부분 해결됩니다.

내 경우, 두 개의 jQuery 모달들이 서로 겹쳐져 표시됩니다.그걸 방지해서 내 문제를 해결했어.

자신을 호출하는 함수가 있는지 확인합니다.예를들면

export default class DateUtils {
  static now = (): Date => {
    return DateUtils.now()
  }
}

TypeScript 초보자였던 저에게 _var1의 getter와 setter에 문제가 있었습니다.

class Point2{
    
    constructor(private _var1?: number, private y?: number){}

    set var1(num: number){
        this._var1 = num  // problem was here, it was this.var1 = num
    }
    get var1(){
        return this._var1 // this was return this.var1
    }
}
dtTable.dataTable({
    sDom: "<'row'<'col-sm-6'l><'col-sm-6'f>r>t<'row'<'col-sm-6'i><'col-sm-6'p>>",
    "processing": true,
    "serverSide": true,
    "order": [[6, "desc"]],
    "columnDefs": [
        {className: "text-right", "targets": [2, 3, 4, 5]}
    ],
    "ajax": {
        "url": "/dt",
        "data": function (d) {
            d.loanRef = loanRef;
        }
    },
    "fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
        var editButton = '';
        // The number of columns to display in the datatable
        var cols = 8;
        // Th row element's ID
        var id = aData[(cols - 1)];
    }
});

서서 data에서는 같은 인 '', '아까', '아까'를 사용했습니다.d.loanRef = loanRef.loanRef이치노

: 선언하다loanRef 더 것은 을 사용합니다.d.loanRef.

Chrome 32 에서는, 다음의 같은 코드의 호출이 1감소하면, 17905 vs 17904 와 같이 동작합니다.그대로 실행되면 "RangeError: Maximum call stack size exceededed" 오류가 발생합니다.이 제한은 하드 코딩되지 않고 시스템의 하드웨어에 따라 달라지는 것으로 보입니다.함수로서 호출하는 경우, 이 자기부여한도는 메서드로 호출하는 경우보다 높은 것으로 보입니다.즉, 이 특정 코드는 함수로서 호출할 때 메모리를 적게 사용합니다.

메서드로 호출됨:

var ninja = {
    chirp: function(n) {
        return n > 1 ? ninja.chirp(n-1) + "-chirp" : "chirp";
    }
};

ninja.chirp(17905);

함수로 호출:

function chirp(n) {
    return n > 1 ? chirp( n - 1 ) + "-chirp" : "chirp";
}

chirp(20889);

여기서도 비슷한 문제가 있었습니다.드롭다운 로고 업로드 박스를 사용하여 로고를 업로드 할 때의 상세 내용입니다.

<div>
      <div class="uploader greyLogoBox" id="uploader" flex="64" onclick="$('#filePhoto').click()">
        <img id="imageBox" src="{{ $ctrl.companyLogoUrl }}" alt=""/>
        <input type="file" name="userprofile_picture"  id="filePhoto" ngf-select="$ctrl.createUploadLogoRequest()"/>
        <md-icon ng-if="!$ctrl.isLogoPresent" class="upload-icon" md-font-set="material-icons">cloud_upload</md-icon>
        <div ng-if="!$ctrl.isLogoPresent" class="text">Drag and drop a file here, or click to upload</div>
      </div>
      <script type="text/javascript">
          var imageLoader = document.getElementById('filePhoto');
          imageLoader.addEventListener('change', handleImage, false);

          function handleImage(e) {
              var reader = new FileReader();
              reader.onload = function (event) {

                  $('.uploader img').attr('src',event.target.result);
              }
              reader.readAsDataURL(e.target.files[0]);
          }
      </script>
      </div>

CSS.css

.uploader {
  position:relative;
  overflow:hidden;
  height:100px;
  max-width: 75%;
  margin: auto;
  text-align: center;

  img{
    max-width: 464px;
    max-height: 100px;
    z-index:1;
    border:none;
  }

  .drag-drop-zone {
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.12);
    padding: 32px;
  }
}

.uploader img{
  max-width: 464px;
  max-height: 100px;
  z-index:1;
  border:none;
}



.greyLogoBox {
  width: 100%;
  background: #EBEBEB;
  border: 1px solid #D7D7D7;
  text-align: center;
  height: 100px;
  padding-top: 22px;
  box-sizing: border-box;
}


#filePhoto{
  position:absolute;
  width:464px;
  height:100px;
  left:0;
  top:0;
  z-index:2;
  opacity:0;
  cursor:pointer;
}

수정 전 코드는 다음과 같습니다.

function handleImage(e) {
              var reader = new FileReader();
              reader.onload = function (event) {
                  onclick="$('#filePhoto').click()"
                  $('.uploader img').attr('src',event.target.result);
              }
              reader.readAsDataURL(e.target.files[0]);
          }

콘솔 오류:

여기에 이미지 설명 입력

제거하여 해결했습니다.onclick="$('#filePhoto').click()"div 태그에서.

같은 문제에 직면하여 Ajax에서 두 번 사용된 필드 이름을 삭제하여 해결했습니다.

    jQuery.ajax({
    url : '/search-result',
    data : {
      searchField : searchField,
      searchFieldValue : searchField,
      nid    :  nid,
      indexName : indexName,
      indexType : indexType
    },
.....

이 경우 문제는 부모와의 경로가 같은 자녀 루트가 있기 때문입니다.

const routes: Routes = [
  {
    path: '',
    component: HomeComponent,
    children: [
      { path: '', redirectTo: 'home', pathMatch: 'prefix' },
      { path: 'home', loadChildren: './home.module#HomeModule' },
    ]
  }
];

그래서 나는 어린이 경로의 선을 없애야 했다.

const routes: Routes = [
  {
    path: '',
    component: HomeComponent,
    children: [
      { path: 'home', loadChildren: './home.module#HomeModule' },
    ]
  }
];

crome 브라우저에서 ctrl+shift+j를 누른 후 source 탭을 누르면 코드 컴파일 플로우가 제공되며 코드 브레이크 포인트를 사용하여 찾을 수 있습니다.

이 스레드가 오래된 것은 알지만 다른 사람에게 도움이 될 수 있도록 이 문제를 발견한 시나리오를 언급할 가치가 있다고 생각합니다.

다음과 같은 중첩 요소가 있다고 가정합니다.

<a href="#" id="profile-avatar-picker">
    <span class="fa fa-camera fa-2x"></span>
    <input id="avatar-file" name="avatar-file" type="file" style="display: none;" />
</a>

부모 이벤트 내에서는 자녀 요소 이벤트를 조작할 수 없습니다.자체에게 전파되어 예외가 느려질 때까지 재귀 콜을 발신하기 때문입니다.

따라서 이 코드는 실패합니다.

$('#profile-avatar-picker').on('click', (e) => {
    e.preventDefault();

    $('#profilePictureFile').trigger("click");
});

이를 피하기 위한 두 가지 옵션이 있습니다.

  • 아이를 부모 외부로 이동합니다.
  • 하위 요소에 stopPropagation 함수를 적용합니다.

같은 이름의 JS Functions가 2개 있기 때문에 이 오류가 발생하였습니다.

만약 당신이 구글 맵으로 작업하고 있다면, lat lng이 다음 주소로 전달되고 있는지 확인하세요.new google.maps.LatLng적절한 형식입니다.내 경우엔 그들은 정의되지 않은 것으로 받아들여지고 있었다.

변환 데이터 유형으로 인해 발생할 수 있습니다. 예를 들어 문자열로 간주한 개체가 있습니다.

예를 들어 js 클라이언트에 있는 nodejs의 socket.id은 문자열이 아닙니다.문자열로 사용하려면 String이라는 단어를 먼저 추가해야 합니다.

String(socket.id);

이 에러는, Ajax 콜에서 발생하며, 그 변수를 전달하려고 한 데이터가 정의되어 있지 않습니다.이것은 이 에러를 나타내고 있지만, 정의되어 있지 않은 변수를 기술하고 있지 않습니다.변수 n이 값을 얻는다는 정의를 추가했습니다.

변수, 값을 할당하려고 했는데 변수가 선언되지 않았습니다.

변수를 선언하면 오류가 수정되었습니다.

언급URL : https://stackoverflow.com/questions/6095530/maximum-call-stack-size-exceeded-error

반응형