PDA

View Full Version : مشکل در Update Ui در زمان اجرای function در جاوااسکریپت


Mohammad_1984
دوشنبه 22 آبان 1391, 14:51 عصر
سلام

فرض کنید یه function جاوا اسکریپتی داریم, که شامل دستوراتی هست, یکی از دستوراتش اینه که مثلا Text یه textbox رو تغییر بده, چرا وقتی که function رو اجرا میکنیم بعد از اجرای خطی که مربوط به تغییر مقدار textbox هست, مقدار textbox در صفحه عوض نمیشه, زمانی عوض میشه که دستورات کل function اجرا شود.
o.najaee
دوشنبه 22 آبان 1391, 18:35 عصر
سلام
چندتا دلیل ممکنه باعث این مساله بشه. بهتره یه مقدار کدی که استفاده کردین بزارید اینجا که بشه فهمید مشکل از کجاست.
mrgraphy
دوشنبه 22 آبان 1391, 19:39 عصر
سلام دوست عزیز.
وقتی شما یک متدی رو در جاوا اسکریپت مینویسید تا اون متد باید کاملا توسط مرورگر خوانده بشه تا کار بکنه و این منطقی هستش که تغییرات تا پایان اجرای کل دستورات صورت نمیگیره.
Mohammad_1984
سه شنبه 23 آبان 1391, 10:38 صبح
یه کد ساده میزارم
من میخوام وقتی روی button کلیک میکنم و function مربوطه call میشه بعد از خطی که مقدار textbox رو تغییر دادم ui من update بشه, یه حلقه for هم بعدش گذاشتم که یه delay ایجاد بشه

الان وقتی این function رو call میکنم, تا دستورات function مربوطه تمام نشده هیج کاری با page نمیتونم انجام بدم انگار که hang کرده. منتهی وقتی قبل از for یه alert نشان میدم مقدار textbox آپدیت میشه چون تا وقتی alert روی صفحه هست به for نمیرسه

ما تو برنامه های desktop مانند C#‎ Windows Applicaiton هم این داستان رو داریم, که با Thread حل میشه, ولی در جاوا اسکریپت فکر میکنم کلا یه thread وجود داره.




<html>
<head>
<title></title>
<script type="text/javascript">
function myfunction() {
document.getElementById('txt').value = 'Text';

//alert();

for (var i = 0; i < 1000000000; i++) {

}
}
</script>
</head>
<body>
</body>
<input type="text" id="txt" />
<input type="button" value="Button" onclick="myfunction()" />
</html>
mrgraphy
سه شنبه 23 آبان 1391, 13:17 عصر
همون طور که خدمتتون گفتم تا اتمام کامل دستورات هیچ اتفاقی نمیوفته.
یعنی تا وقتی که سند اماده نشه یا document ready نشه عملی انجام نمیشه
Mohammad_1984
سه شنبه 23 آبان 1391, 14:39 عصر
همون طور که خدمتتون گفتم تا اتمام کامل دستورات هیچ اتفاقی نمیوفته.
یعنی تا وقتی که سند اماده نشه یا document ready نشه عملی انجام نمیشه

خب من هم با همین مشکل دارم دیگه, من میخوام به محض اینکه مقدار texbox رو عوض کردم همون لحظه عوض شه و صبر نکنه تا دستورات function کامل اجرا شه.
hakan648
سه شنبه 23 آبان 1391, 22:42 عصر
سلام
شما میتونید از setTimeout و callback برای شبیه سازی عملیات asynchronous استفاده کنید.

برای مشکل فعلیتون میتونید کدهارو به این شکل تغییر بدید :

function myfunction() {
document.getElementById('txt').value = 'Text';

setTimeout(function(){
for (var i = 0; i < 10000000; i++) {}
},0);
}

البته عددی که قرار دادید خیلی بزرگ هست!
برای تست کردن عملیات نا همزمان ، این کد رو تست کنید ( فایرباگ هم اجرا و در تب console باشد ) :

function mainFn(){
console.log("start");
setTimeout(asyncFn,0);
console.log("end");
}

function asyncFn() {
for (var i = 0; i < 1000000000; i++) {}
console.log("asyncFn!");
}

mainFn();



اطلاعات بیشتر :
Asynchronous JavaScript Queue/Sequence (http://devign.me/asynchronous-javascript-queue-sequence/)
http://www.slideshare.net/clutchski/writing-asynchronous-javascript-101


بد نیست در مورد callback هم این لینک رو بررسی کنید :
Callback Functions in JavaScript (http://www.impressivewebs.com/callback-functions-javascript/)
Mohammad_1984
چهارشنبه 24 آبان 1391, 14:09 عصر
برای مشکل فعلیتون میتونید کدهارو به این شکل تغییر بدید :

function myfunction() {
document.getElementById('txt').value = 'Text';

setTimeout(function(){
for (var i = 0; i < 10000000; i++) {}
},0);
}



دوست عزیز این روش هم قبلا امتحان کردم, جواب نمیده, یعنی بعد از اینکه حلفه for تمام شد, مقدار textbox تغییر میکنه
مگر اینکه مقدار timeout را بالا ببرم در اون صورت مقدار textbox آپدیت میشه ولی تا وقتی for من تمام نشده, Ui من انگار هنگه و نمیشه باهاش کار کرد