আমি একটি ডাইরেক্ট ওয়েব রিমোটিং (ডিডাব্লুআর) জাভাস্ক্রিপ্ট লাইব্রেরী ফাইল ব্যবহার করছি এবং কেবল সাফারি (ডেস্কটপ এবং আইপ্যাড) এ ত্রুটি পাচ্ছি
এটা বলে
সর্বাধিক কল স্ট্যাকের আকার ছাড়িয়ে গেছে।
এই ত্রুটিটির অর্থ কী এবং এটি সম্পূর্ণ প্রক্রিয়াজাতকরণ বন্ধ করে দেয়?
এছাড়াও Safariব্রাউজারের জন্য কোনও স্থিরতা (আসলে iPad Safariএটিতে, এটিতে বলা হয়)
জেএস: কার্যকর কার্যকর সময়সীমা অতিক্রম করেছে
যা আমি ধরে নিচ্ছি একই কল স্ট্যাক ইস্যু)
উত্তর:
এর অর্থ হ'ল আপনার কোডের কোথাও, আপনি কোনও ফাংশন কল করছেন যা ঘুরেফিরে অন্য ফাংশনকে কল করে এবং ততক্ষণ আপনি কল স্ট্যাকের সীমাতে আঘাত না করা পর্যন্ত।
এটি প্রায়শই কারণ একটি বেস কেস যা পূরণ করা হচ্ছে না সাথে পুনরাবৃত্ত ফাংশনের কারণে।
এই কোডটি বিবেচনা করুন ...
(function a() {
a();
})();
এখানে কয়েক মুঠো কল করার পরে স্ট্যাক ...
আপনি দেখতে পাচ্ছেন, কল স্ট্যাকটি একটি সীমা ছাড় না দেওয়া পর্যন্ত বৃদ্ধি পায়: ব্রাউজার হার্ডকডড স্ট্যাকের আকার বা মেমরির ক্লান্তি।
এটি সংশোধন করার জন্য, আপনার পুনরাবৃত্ত ফাংশনটির একটি বেস কেস রয়েছে যা পূরণ করা যায় তা নিশ্চিত করুন ...
(function a(x) {
// The following condition
// is the base case.
if ( ! x) {
return;
}
a(--x);
})(10);
আপনি যদি কখনও দুর্ঘটনাক্রমে একই জাভাস্ক্রিপ্ট ফাইলটি দুবার আমদানি / এম্বেড করে থাকেন তবে এটি পরিদর্শকের আপনার সংস্থান ট্যাবে যাচাই করে নেওয়া উচিত worth
আমার ক্ষেত্রে, আমি ইনপুট উপাদানগুলি তাদের মানগুলির পরিবর্তে প্রেরণ করছিলাম:
$.post( '',{ registerName: $('#registerName') } )পরিবর্তে:
$.post( '',{ registerName: $('#registerName').val() } )এটি আমার ক্রোম ট্যাবটিকে এমন এক পর্যায়ে হিমায়িত করে যখন এটি পৃষ্ঠাটি প্রতিক্রিয়াহীন হয়ে ওঠার জন্য এমনকি আমাকে 'অপেক্ষা / কিল' ডায়ালগও দেখায়নি ...
আপনার কোডে কোথাও একটি পুনরাবৃত্ত লুপ রয়েছে (অর্থাত্ একটি ফাংশন যা শেষ পর্যন্ত স্ট্যাক পূর্ণ না হওয়া পর্যন্ত নিজেকে পুনরায় কল করে)।
অন্যান্য ব্রাউজারগুলির হয় হয় বড় স্ট্যাক (যাতে পরিবর্তে আপনি একটি সময়সীমা পান) বা তারা কোনও কারণে ত্রুটিটি গ্রাস করে (সম্ভবত কোনও খারাপভাবে স্থাপন করা ট্রাই-ক্যাচ)।
ত্রুটি ঘটলে কল স্ট্যাকটি পরীক্ষা করতে ডিবাগারটি ব্যবহার করুন।
স্ট্যাকওভারফ্লো সনাক্তকরণে সমস্যাটি হ'ল কখনও কখনও স্ট্যাকের ট্রেসটি উন্মুক্ত করে দেওয়া হয় এবং আপনি আসলে কী চলছে তা দেখতে সক্ষম হবেন না।
আমি এর জন্য দরকারী Chrome এর নতুন কিছু ডিবাগিং সরঞ্জাম পেয়েছি।
এটি হিট করুন Performance tab, Javascript samplesসক্ষমিত রয়েছে তা নিশ্চিত করুন এবং আপনি এর মতো কিছু পাবেন।
এখানে ওভারফ্লো যে খুব স্পষ্ট! আপনি যদি ক্লিক করেন তবে extendObjectআপনি কোডের মধ্যে সঠিক লাইন নম্বরটি দেখতে পারবেন।
আপনি এমন সময়গুলিও দেখতে পারেন যা সহায়ক বা নাও হতে পারে বা একটি লাল রঙের হারিং।
আপনি যদি সমস্যাটি না খুঁজে পেতে চান তবে অন্য একটি কার্যকর কৌশল হ'ল আপনি যে console.logসমস্যাটি মনে করেন সেখানে প্রচুর বিবৃতি দেওয়া। উপরের উপরের ধাপটি আপনাকে এটিতে সহায়তা করতে পারে।
ক্রোমে আপনি যদি বারবার অভিন্ন আউটপুট আউটপুট করেন তবে সমস্যাটি আরও স্পষ্টভাবে প্রদর্শিত যেখানে এটি এটি প্রদর্শিত হবে। এই উদাহরণস্বরূপ স্ট্যাকটি শেষ পর্যন্ত ক্র্যাশ হওয়ার আগে 7152 ফ্রেমে আঘাত করেছিল:
আমার ক্ষেত্রে, আমি নিম্নলিখিতটি ব্যবহার করে একটি বড় বাইট অ্যারে স্ট্রিংয়ে রূপান্তর করছিলাম:
String.fromCharCode.apply(null, new Uint16Array(bytes))bytes বেশ কয়েকটি মিলিয়ন এন্ট্রি রয়েছে, যা স্ট্যাকের সাথে মানানসই big
var uintArray = new Uint16Array(bytes); var converted = []; uintArray.forEach(function(byte) {converted.push(String.fromCharCode(byte))});
আমার ক্ষেত্রে, ক্লিক ইভেন্টটি শিশু উপাদানগুলিতে প্রচার করছে। সুতরাং, আমাকে নিম্নলিখিতগুলি লিখতে হয়েছিল:
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");
});এইচটিএমএল কোডটি এখানে:
<div class="current-code">
<input type="submit" name="removediscountcouponcode" value="
title="Remove" class="remove-discount-button">
</div>আপনার যদি কোনও কারণে অসীম প্রক্রিয়া / পুনরাবৃত্তি চলমান দরকার হয় তবে আপনি কোনও পৃথক থ্রেডে একটি ওয়েবকর্ম ব্যবহার করতে পারেন। http://www.html5rocks.com/en/tutorials/workers/basics/
আপনি যদি ডোম উপাদানগুলি পরিচালনা করতে এবং পুনরায় আঁকাতে চান তবে অ্যানিমেশনটি http://creativejs.com/resources/requestanimationframe/ ব্যবহার করুন
এখানে প্রায় প্রতিটি উত্তরে বলা হয়েছে যে এটি কেবল অসীম লুপের কারণে ঘটতে পারে। এটি সত্য নয়, আপনি অন্যথায় গভীরভাবে নেস্টেড কলগুলির মাধ্যমে স্ট্যাকটিকে ওভার-রান করতে পারেন (এটি দক্ষ নয়, তবে এটি অবশ্যই সম্ভাবনার ক্ষেত্রে রয়েছে) in আপনার যদি আপনার জাভাস্ক্রিপ্ট ভিএম এর নিয়ন্ত্রণ থাকে তবে আপনি স্ট্যাকের আকারটি সামঞ্জস্য করতে পারেন। উদাহরণ স্বরূপ:
node --stack-size=2000
আরও দেখুন: আমি কীভাবে নোড.জেজে সর্বোচ্চ কল স্ট্যাকের আকার বাড়াতে পারি
আমার ক্ষেত্রে, দুটি jQuery মডেল একে অপরের উপরে স্তুপীকৃত দেখাচ্ছে। যা আমার সমস্যার সমাধান করে।
আমরা সম্প্রতি যে অ্যাডমিন সাইটটিতে আমরা কাজ করছি তাতে একটি ক্ষেত্র যুক্ত করেছি - কন্টাক্ট_টাইপ ... সহজ? ঠিক আছে, আপনি যদি "টাইপ করুন" নির্বাচন করুন এবং একটি jquery এজাক্স কল মাধ্যমে এটি প্রেরণ করার চেষ্টা করেন তবে 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 }
});এবং সেই অনুসারে কিছু_ফানশন.এফপি পুনর্লিখন করুন - সমস্যা সমাধান হয়েছে।
আপনার কাছে কল করে এমন কোনও ফাংশন রয়েছে কিনা তা পরীক্ষা করুন। উদাহরণ স্বরূপ
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থেকে মজিলা ডক্স :
তবে সাবধান থাকুন: এইভাবে প্রয়োগ করতে গিয়ে আপনি জাভাস্ক্রিপ্ট ইঞ্জিনের যুক্তির দৈর্ঘ্য সীমা ছাড়িয়ে যাওয়ার ঝুঁকিটি চালান। অনেকগুলি আর্গুমেন্টের সাথে ফাংশন প্রয়োগের পরিণতিগুলি (কয়েক হাজার যুক্তির চেয়ে বেশি ভাবেন) ইঞ্জিনগুলিতে পৃথক হয়ে থাকে (জাভাস্ক্রিপ্টকরে 65536 এর হার্ড-কোডেড যুক্তির সীমা রয়েছে) কারণ সীমাটি (প্রকৃতপক্ষে কোনও অতিরিক্ত-বৃহত স্ট্যাকের প্রকৃতিও রয়েছে) আচরণ) অনির্দিষ্ট is কিছু ইঞ্জিন ব্যতিক্রম ছুঁড়ে ফেলবে। আরও ক্ষতিকারকভাবে, অন্যরা ইচ্ছাকৃতভাবে প্রয়োগিত ফাংশনে পাস হওয়া যুক্তির সংখ্যা সীমাবদ্ধ করবে। এই পরবর্তী ঘটনাটি উদাহরণস্বরূপ: যদি এইরকম ইঞ্জিনের চারটি আর্গুমেন্টের সীমা থাকে (প্রকৃত সীমা অবশ্যই উল্লেখযোগ্যভাবে উচ্চতর হয়) তবে এটি এমন হবে যেন উপরের উদাহরণগুলিতে প্রয়োগ করার জন্য 5, 6, 2, 3 টি আর্গুমেন্ট পাস হয়ে গেছে, বরং সম্পূর্ণ অ্যারের চেয়ে।
সুতরাং চেষ্টা কর:
var items = [];
var newItems = new Array(1000000);
for(var i = 0; i < newItems.length; i++){
items.push(newItems[i]);
}আমার কম্পিউটারে ক্রম 32-তে 1 টি কাজ হ্রাস থাকলে নীচে অভিন্ন কোডের উভয় অনুরোধ যেমন 17905 বনাম 17904 as যদি চালানো হয় তবে তারা ত্রুটি তৈরি করবে "রেঞ্জেরর: সর্বোচ্চ কল স্ট্যাকের আকার ছাড়িয়ে গেছে" " মনে হচ্ছে এই সীমাটি হার্ডকোডযুক্ত নয় তবে আপনার মেশিনের হার্ডওয়্যারের উপর নির্ভরশীল। এটি প্রদর্শিত হয় যে কোনও ফাংশন হিসাবে আহ্বান করা হলে এই স্ব-চাপিয়ে দেওয়া সীমাটি কোনও পদ্ধতি হিসাবে আহ্বান করা হওয়ার চেয়ে বেশি হয় অর্থাত্ যখন কোনও ফাংশন হিসাবে ডাকা হয় তখন এই নির্দিষ্ট কোডটি কম মেমরি ব্যবহার করে।
একটি পদ্ধতি হিসাবে আহ্বান:
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()"ডিভ ট্যাগ থেকে সরিয়ে এটি সমাধান করেছি ।
আমি একই সমস্যার মুখোমুখি হচ্ছিলাম আমি এজল্ড যেমন দু'বার ব্যবহার করা হয়েছিল এমন একটি ফিল্ডের নাম সরিয়ে এটি সমাধান করেছি
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");
});এটি এড়াতে আপনার কাছে দুটি বিকল্প রয়েছে:
আমার এই ত্রুটি হয়েছিল কারণ একই নামে আমার দুটি জেএস ফাংশন ছিল
আপনি যদি গুগল ম্যাপের সাথে কাজ করছেন, তবে ল্যাট এলএনজি 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' },
]
}
];আমার ক্ষেত্রে আমি এজ্যাক্স কলটিতে এই ত্রুটিটি পেয়েছি এবং যে ভেরিয়েবলটি পাস করার চেষ্টা করেছি সেই ডেটাটি সংজ্ঞায়িত হয়নি, যা আমাকে এই ত্রুটি দেখিয়ে দিচ্ছে তবে সেই পরিবর্তনশীলকে সংজ্ঞায়িত করা হয়নি বলে বর্ণনা করছে। আমি সংজ্ঞায়িত করেছি যে ভেরিয়েবল এন মান পেয়েছে।
একই ইস্যুটি জুড়ে এসেছেন, বাবেলকে দোষ দেওয়া কি ভুল হয়েছে তা বুঝতে পারবেন না;)
কোডগুলি ব্রাউজারগুলিতে কোনও ব্যতিক্রম প্রত্যাবর্তন করছে না:
if (typeof document.body.onpointerdown !== ('undefined' || null)) {সমস্যাটি খারাপভাবে তৈরি হয়েছিল || (বা) অংশ হিসাবে বাবেল নিজস্ব ধরণের চেক তৈরি করে:
function _typeof(obj){if(typeof Symbol==="function"&&_typeof(Symbol.iterator)==="symbol")তাই অপসারণ
|| nullতৈরি বাবেল প্রতিস্থাপন কাজ।
কৌণিক ক্ষেত্রে, আপনি যদি মাদুর-নির্বাচন ব্যবহার করছেন এবং 400+ বিকল্প রয়েছে, তবে এই ত্রুটিটি হতে পারে https://github.com/angular/components/issues/12504
আপনাকে @ কৌনিক / উপাদান সংস্করণ আপডেট করতে হবে
আমি প্রতিক্রিয়া-নেটিভ 0.61.5 পাশাপাশি ব্যবহার করছি ( এনএমপি 6.9.0 এবং নোড 10.16.1 )
আমি প্রকল্পে কোনও নতুন লাইব্রেরি ইনস্টল করার সময় আমি একটি পেয়েছি
(যেমন এনপিএম ইনস্টল @ রিএ্যাক্ট-নেভিগেশন / নেটিভ - সেভ)
সর্বাধিক কল স্ট্যাকের আকার ত্রুটি ছাড়িয়ে গেছে
তার জন্য, আমি চেষ্টা করি
sudo এনপিএম ক্যাশে পরিষ্কার - বল
(দ্রষ্টব্য: - নীচের কমান্ডটি আপনার এনপিএম ক্যাশে আকারের উপর নির্ভর করে সাধারণত 1 থেকে 2 মিনিট সময় নেয় )
কখনও কখনও রূপান্তরিত ডেটা ধরণের কারণে ঘটেছিল, উদাহরণস্বরূপ আপনার কাছে এমন একটি জিনিস রয়েছে যা আপনি স্ট্রিং হিসাবে বিবেচনা করেছেন।
উদাহরণস্বরূপ জেএস ক্লায়েন্টে নোডেজে সকেট.আইডি স্ট্রিং নয়। স্ট্রিং হিসাবে এটি ব্যবহার করতে আপনাকে আগে স্ট্রিং শব্দটি যুক্ত করতে হবে:
String(socket.id);আমি একটি ভেরিয়েবল, একটি মান নির্ধারণ করার চেষ্টা করছিলাম যখন সেই পরিবর্তনশীলটি ঘোষিত হয়নি।
ভেরিয়েবল ঘোষণা করা আমার ত্রুটিটি স্থির করে।
dataআজাক্সের মাধ্যমে ভেরিয়েবলগুলি (তাদের ঘোষণা ছাড়াই) প্রেরণের চেষ্টা করার সময় আমি এই ত্রুটিটি পেয়েছি । ভেরিয়েবলগুলি ঘোষণা করে ত্রুটি স্থির করে।