ข้อผิดพลาดเกินขนาดสูงสุดของสแต็ก

ฉันใช้ไฟล์ไลบรารี JavaScript Direct Direct Remoting (DWR) และฉันได้รับข้อผิดพลาดเฉพาะใน Safari (เดสก์ท็อปและ iPad)

มันบอกว่า

เกินขนาดสแต็กการโทรสูงสุด

ข้อผิดพลาดนี้หมายถึงอะไรอย่างแน่นอนและมันหยุดการประมวลผลอย่างสมบูรณ์?

ยังแก้ไขSafariเบราว์เซอร์ใด ๆ(จริง ๆ แล้วiPad Safariมันพูดว่า

JS: การดำเนินการเกินเวลาที่กำหนด

ที่ฉันสมมติว่าเป็นปัญหาการโทรสแต็คเดียวกัน)

หมายความว่าบางแห่งในรหัสของคุณคุณกำลังเรียกฟังก์ชั่นซึ่งจะเรียกฟังก์ชั่นอื่นและอื่น ๆ จนกว่าคุณจะกดขีด จำกัด การโทร

นี่เกือบจะเป็นเพราะฟังก์ชั่นวนซ้ำพร้อมเคสพื้นฐานที่ไม่ได้พบ

กำลังดูสแต็ก

พิจารณารหัสนี้ ...

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

นี่คือสแต็คหลังจากการโทรจำนวนหนึ่ง ...

อย่างที่คุณเห็นการโทรสแต็คจะโตขึ้นเรื่อย ๆ จนกว่าจะถึงขีด จำกัด : ขนาดเบราว์เซอร์ที่กำหนดรหัสยากหรือหน่วยความจำหมด

เพื่อแก้ไขให้แน่ใจว่าฟังก์ชั่นวนซ้ำของคุณมีตัวพิมพ์ใหญ่ที่สามารถพบได้ ...

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

บางครั้งคุณสามารถรับสิ่งนี้ได้หากคุณนำเข้า / ฝังไฟล์ JavaScript สองครั้งโดยไม่ตั้งใจควรตรวจสอบในแท็บทรัพยากรของผู้ตรวจสอบ

ในกรณีของฉันฉันกำลังส่งองค์ประกอบอินพุตแทนค่าของพวกเขา:

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

แทน:

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

สิ่งนี้ทำให้แท็บ Chrome ของฉันแข็งตัวจนถึงขั้นที่ไม่แสดงให้ฉันเห็นกล่องโต้ตอบ 'รอ / ฆ่า' เมื่อหน้าเว็บไม่ตอบสนอง ...

มีวนซ้ำในรหัสของคุณ (เช่นฟังก์ชันที่เรียกตัวเองซ้ำแล้วซ้ำอีกจนกระทั่งกองซ้อนเต็ม)

เบราว์เซอร์อื่นอาจมีสแต็คที่ใหญ่กว่า (ดังนั้นคุณจึงได้รับการหมดเวลาแทน) หรือพวกเขากลืนข้อผิดพลาดด้วยเหตุผลบางอย่าง

ใช้ดีบักเกอร์เพื่อตรวจสอบ call stack เมื่อเกิดข้อผิดพลาด

ปัญหาเกี่ยวกับการตรวจสอบ stackoverflows บางครั้งการติดตามสแต็กจะผ่อนคลายและคุณจะไม่สามารถเห็นสิ่งที่เกิดขึ้นจริง

ฉันพบเครื่องมือการแก้ไขข้อบกพร่องรุ่นใหม่กว่าของ Chrome มีประโยชน์สำหรับเรื่องนี้

ตีPerformance tabให้แน่ใจJavascript samplesมีการเปิดใช้งานและคุณจะได้รับบางสิ่งบางอย่างเช่นนี้

เห็นได้ชัดว่าที่นี่ล้นอยู่ที่นี่! หากคุณคลิกที่extendObjectคุณจะสามารถเห็นหมายเลขบรรทัดที่แน่นอนในรหัส

นอกจากนี้คุณยังสามารถดูเวลาที่อาจมีหรือไม่มีประโยชน์หรือเป็นปลาเฮอริ่งแดงก็ได้

เคล็ดลับที่มีประโยชน์อีกอย่างถ้าคุณไม่สามารถหาปัญหาได้จริง ๆ console.logที่คุณคิดว่าเป็นปัญหา ขั้นตอนก่อนหน้าข้างต้นสามารถช่วยคุณได้

ใน Chrome หากคุณส่งข้อมูลที่ซ้ำกันซ้ำไปซ้ำมามันจะแสดงเช่นนี้แสดงให้เห็นว่าปัญหาอยู่ที่ใด ในกรณีนี้สแต็คกระทบ 7152 เฟรมก่อนที่มันจะล้มเหลวในที่สุด:

ในกรณีของฉันฉันกำลังแปลงอาร์เรย์ขนาดใหญ่เป็นสตริงโดยใช้สิ่งต่อไปนี้:

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

bytes มีหลายล้านรายการซึ่งใหญ่เกินกว่าที่จะใส่ลงในสแต็กได้

ในกรณีของฉันเหตุการณ์คลิกกำลังเผยแพร่ในองค์ประกอบลูก ดังนั้นฉันต้องใส่สิ่งต่อไปนี้:

e.stopPropagation ()

เมื่อคลิกเหตุการณ์:

 $(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>

ตรวจสอบรายละเอียดข้อผิดพลาดในคอนโซลแถบเครื่องมือ Chrome dev ซึ่งจะให้ฟังก์ชันใน call stack และแนะนำคุณเกี่ยวกับการเรียกซ้ำที่ทำให้เกิดข้อผิดพลาด

หากคุณต้องการกระบวนการที่ไม่สิ้นสุด / การเรียกซ้ำด้วยเหตุผลบางอย่างคุณสามารถใช้เว็บเวิร์คเกอร์ในเธรดแยกต่างหาก http://www.html5rocks.com/en/tutorials/workers/basics/

หากคุณต้องการจัดการองค์ประกอบ dom และวาดใหม่ให้ใช้ภาพเคลื่อนไหว http://creativejs.com/resources/requestanimationframe/

เกือบทุกคำตอบที่นี่ระบุว่าสิ่งนี้อาจเกิดจากการวนซ้ำไม่สิ้นสุด นั่นไม่เป็นความจริงคุณสามารถเรียกใช้สแต็คผ่านการโทรที่ซ้อนกันลึก (ไม่ได้บอกว่ามันมีประสิทธิภาพ แต่มันอยู่ในขอบเขตที่เป็นไปได้อย่างแน่นอน) หากคุณมีการควบคุม JavaScript VM ของคุณคุณสามารถปรับขนาดสแต็กได้ ตัวอย่างเช่น:

node --stack-size=2000

ดูเพิ่มเติม: ฉันจะเพิ่มขนาดการโทรสูงสุดใน Node.js ได้อย่างไร

ในกรณีของฉัน jQuery สองรูปแบบกำลังแสดงซ้อนกันอยู่ด้านบนของกันและกัน การป้องกันนั้นแก้ไขปัญหาของฉันได้

เราเพิ่งเพิ่มเขตข้อมูลลงในไซต์ผู้ดูแลระบบที่เรากำลังทำงานอยู่ - contact_type ... ง่ายใช่ไหม ดีถ้าคุณโทรเลือก "ประเภท" และลองส่งมันผ่าน jquery ajax โทรมันล้มเหลวด้วยข้อผิดพลาดนี้ฝังลึกใน jquery.js อย่าทำสิ่งนี้:

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

ปัญหาคือประเภท: ประเภท - ฉันเชื่อว่ามันเป็นเราตั้งชื่ออาร์กิวเมนต์ "ประเภท" - มีตัวแปรค่าชื่อประเภทไม่ใช่ปัญหา เราเปลี่ยนสิ่งนี้เป็น:

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

และเขียน some_function.php ใหม่อีกครั้ง - แก้ไขปัญหาแล้ว

ตรวจสอบว่าคุณมีฟังก์ชั่นที่เรียกตัวเองหรือไม่ ตัวอย่างเช่น

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

สิ่งนี้ยังสามารถทำให้เกิด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) เนื่องจากขีด จำกัด (แน่นอนแม้กระทั่งธรรมชาติของกองซ้อนขนาดใหญ่ พฤติกรรม) ไม่ได้ระบุ เครื่องมือบางอย่างจะทำให้เกิดข้อยกเว้น ผู้อื่นจะ จำกัด จำนวนของข้อโต้แย้งที่ส่งผ่านไปยังฟังก์ชันที่ใช้อย่างไม่เป็นอันตราย เพื่อแสดงให้เห็นถึงกรณีหลังนี้: หากเครื่องยนต์มีขีด จำกัด สี่ข้อโต้แย้ง (ขีด จำกัด ที่เกิดขึ้นจริงมีค่าสูงกว่าอย่างมีนัยสำคัญ) มันจะเหมือนกับว่าข้อโต้แย้ง 5, 6, 2, 3 ถูกส่งผ่านไปใช้ในตัวอย่างด้านบน มากกว่าอาร์เรย์เต็ม

ดังนั้นลอง:

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

การร้องขอทั้งสองของรหัสที่เหมือนกันด้านล่างหากลดลง 1 ผลงานใน Chrome 32 บนคอมพิวเตอร์ของฉันเช่น 17905 กับ 17904 หากทำงานตามที่พวกเขาจะสร้างข้อผิดพลาด "RangeError: เกินขนาดสแต็กการโทรสูงสุด" ดูเหมือนว่าจะเป็นขีด จำกัด นี้ไม่ได้เป็นฮาร์ดโค้ด แต่ขึ้นอยู่กับฮาร์ดแวร์ของเครื่องของคุณ ปรากฏว่าหากเรียกใช้เป็นฟังก์ชั่นการ จำกัด การเรียกตนเองนี้จะสูงกว่าถ้าเรียกใช้เป็นวิธีการเช่นรหัสนี้ใช้หน่วยความจำน้อยลงเมื่อเรียกใช้เป็นฟังก์ชั่น

เรียกใช้เป็นวิธีการ:

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);

คุณสามารถค้นหาฟังก์ชั่นวนซ้ำในเบราว์เซอร์ crome กด ctrl + shift + j จากนั้นแท็บแหล่งที่มาซึ่งจะช่วยให้คุณรวบรวมการไหลของรหัสและคุณสามารถค้นหาโดยใช้จุดพักในรหัส

ฉันยังประสบปัญหาที่คล้ายกันที่นี่คือรายละเอียดเมื่ออัปโหลดโลโก้โดยใช้กล่องอัปโหลดโลโก้แบบเลื่อนลง

<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
    },
.....

ฉันรู้ว่ากระทู้นี้เก่า แต่ฉันคิดว่ามันคุ้มค่าที่จะกล่าวถึงสถานการณ์ที่ฉันพบปัญหานี้เพื่อให้สามารถช่วยเหลือผู้อื่นได้

สมมติว่าคุณมีองค์ประกอบที่ซ้อนกันดังนี้:

<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 สองตัวที่มีชื่อเดียวกัน

หากคุณทำงานกับแผนที่ google ให้ตรวจสอบว่า lat lng กำลังถูกส่งผ่านเป็นnew google.maps.LatLngรูปแบบที่เหมาะสมหรือไม่ ในกรณีของฉันพวกเขาจะถูกส่งเป็นไม่ได้กำหนด

ปัญหาในกรณีของฉันเป็นเพราะฉันมีเส้นทางลูกที่มีเส้นทางเดียวกันกับผู้ปกครอง:

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' },
    ]
  }
];

ในกรณีของฉันฉันได้รับข้อผิดพลาดนี้ในการโทร ajax และข้อมูลที่ฉันพยายามส่งผ่านตัวแปรนั้นยังไม่ได้กำหนดนั่นแสดงให้ฉันเห็นข้อผิดพลาดนี้ แต่ไม่ได้อธิบายถึงตัวแปรที่ไม่ได้กำหนดไว้ ฉันเพิ่มนิยามไว้ว่าตัวแปร n มีค่า

พบปัญหาเดียวกันโดยไม่คิดว่ามีอะไรผิดเริ่มตำหนิบาเบล;)

มีรหัสไม่กลับข้อยกเว้นในเบราว์เซอร์:

if (typeof document.body.onpointerdown !== ('undefined' || null)) {

ปัญหาถูกสร้างขึ้นอย่างไม่ดี || (หรือ) ส่วนหนึ่งเมื่อ babel สร้างการตรวจสอบประเภทของตัวเอง:

function _typeof(obj){if(typeof Symbol==="function"&&_typeof(Symbol.iterator)==="symbol")

ดังนั้นการลบ

|| null

ทำให้การส่งข้อมูล babel ทำงานได้

ในกรณีของฉันฉันโดยไม่ได้ตั้งใจฉันได้กำหนดชื่อตัวแปรเดียวกันและฟังก์ชั่น val "class_routine_id"

var class_routine_id = $("#class_routine_id").val(class_routine_id);

มันควรจะเป็นเช่น:

 var class_routine_id = $("#class_routine_id").val(); 

ในเชิงมุมหากคุณใช้ตัวเลือกการเลื่อนและมีตัวเลือกมากกว่า 400 ข้อผิดพลาดนี้อาจเกิดขึ้นได้ https://github.com/angular/components/issues/12504

คุณต้องอัปเดตเวอร์ชั่น @ angular / material

ฉันใช้ React-Native 0.61.5พร้อมกับ ( npm 6.9.0 & โหนด 10.16.1 )

ในขณะที่ฉันกำลังติดตั้งไลบรารีใหม่ในโครงการที่ฉันได้รับ

(เช่น npm install @ react-navigation / native - บันทึก)

ข้อผิดพลาดเกินขนาดสูงสุดของสแต็ก

สำหรับสิ่งที่ฉันลอง

ทำความสะอาดแคช sudo npm - บังคับใช้

(หมายเหตุ: - คำสั่งด้านล่างมักใช้เวลา 1 ถึง 2 นาที ขึ้นอยู่กับขนาดแคช npmของคุณ)

บางครั้งเกิดขึ้นเนื่องจากการแปลงชนิดข้อมูลตัวอย่างเช่นคุณมีวัตถุที่คุณถือว่าเป็นสตริง

socket.id ใน nodejs ทั้งในไคลเอ็นต์ js เป็นตัวอย่างไม่ใช่สตริง เพื่อใช้เป็นสตริงคุณต้องเพิ่มคำว่า String มาก่อน:

String(socket.id);

ฉันพยายามกำหนดตัวแปรค่าเมื่อไม่ได้ประกาศตัวแปรนั้น

การประกาศตัวแปรแก้ไขข้อผิดพลาดของฉัน