دسترسی به متغیر داخل حلقه ResizeObserver

حقیقتش نمی فهمم کل کد داره چی کار می کنه. 

این خط چی کار میکنه ؟

 resizeObserver.observe(container);

ضمنا عبارت var رو از داخل حقه حذف کردید ؟

با تابع rsizeobzerver در جاوا اسکریپت که آشنا هستین. یه تابعی که تغییرات موجود در پراپرتی ها و اندازه های المنت رو رصد میکنه. اون خط در واقع داره تغییرات در حال رخ دادن در المنت container رو رصد میکنه.

در اینجا من یه المنت دارم به نام div که قابل اسکرول هستش. یه المنت دیگه دارم که چایلد این محسوب میشه و اسمش container هستش و در حقیقت یک ul هستش. در این المنت ul من مجموعه ای از مخاطبین نسخه وب تلگرام رو دارم که هر مخاطب به صورت یک <a> وجود داره. یکی از مشکلاتی که من داشتم این بود که می خواستم در المنت قابل اسکرول div بتونم تا پایین صفحه رو کامل اسکرول کنم. با کدی که در سوال اصلی پرسیدم این کار امکان پذیر شد. همون طور که میدونید تابع و کد مذکور، مدام خودش اسکرول رو مقداری انجام میده و این قدر این کار انجام میشه تا به آخر المنت میرسیم. تا اینجا که همه چیز درسته. حالا در مرحله بعد لازم دارم بدونم آخرین مقدار `val = div.scrollHeight` چه میزان هستش. چرا؟ چون همون طور که میدونید در حال اسکرول خودکار این مقدار مدام داره مقدارش اضافه میشه ولی در انتهای اسکرول دیگه ثابت میمونه. حالا من همین مقدار ثابت انتهایی رو میخوام و همون طور که در سوال گفتم مشکل اینجاست که این مقدار در خود لوپ هستش و ما از بیرون داریم صداش میزنیم.

در ضمن من حذف نکردم خودتون ظاهرا حذف کردین که البته درسته و نباید دوبار تعریفش کرد.

resizeObserver.observe()

این آبجکت که متد بعدش اومده میاد و هر المنتی که بعد از observe و در پرانتز قرار داشته باشه، تغییرات ارتفاع و عرضش رو بررسی میکنه و حتی به شما اعلام میکنه. یعنی کاربر با استفاده از این متد میتونه از تغییرات المنت داخل پرانتز آگاه بشه. در مورد مطلب من، container که در پرانتز اومده یک مجموعه ای از کاربران تلگرام هستش. وقتی کاربر با موس میاد و روی این المنت یعنی کاربران اسکرول میکنه خب معلومه که ارتفاع این المنت دیگه اون مقدار ثابت که در بعضی موارد این چنینی هستش نیست به این دلیل که در اینجا مخاطبین از سرور دانلود میشه و ممکنه مثلا مخاطب جدیدی اضافه شده باشه. به همین دلیله که ارتفاع این المنت ثابت نیست و چون متغیره پس باید از این متد یا تابع استفاده کنیم تا تغییراتش رو بفهمیم. تمام اون لوپ بالا در حقیقت  برای همین فهمیدن تغییرات و انجام یک سری کارهای خاص روی این المنت ارتفاع متغیره. بله، این خط `resizeObserver.observer(container)` میاد و لوپ رو اجرا میکنه. اما عبارت بعدی که میاد و یه چیزی رو چاپ میکنه از خودمه که داخلش یه متغیره به نام val که داخل لوپه و من میخوام اون رو اینجا صدا بزنم

ممنون

اما وقتی حلقه رو اجرا می کنم و مقدار نهاییش مساوی با 10080 میشه باز هم مقدار رو در 

console.log('The global variable is: ' + val);

همون صفر میزنه، یعنی بر میگرده به اول حلقه که مقدارش صفر بود. 

در مورد var منظورم این بود که حتما برداشته شده باشه.

من یه قسمت کد که تعریف resizeobserver هستش رو نمی فهمم.

ببینید :

const container = $("#contacts")[0];
  const div = $(".scrollable.scrollable-y")[5];  

تا اینجا که تعریف متغیر هاست

بعدش یه تابع دارید که نمی دونم ورودیش چیه ؟ تعریفش همینجا درسته ؟ (خیلی جاوا اسکریپت رو بلد نیستم)

var val=0;

let resizeObserver = new ResizeObserver((entries) => {
     for (entry of entries) {
         div.scrollTop = div.scrollHeight;          
         val = div.scrollHeight;
     }
  });

بعد این خط میاد و حلقه بالا رو اجرا می کنه ؟

resizeObserver.observe(container);
 console.log('The global variable is: ' + val)

البته من متوجه شدم که این تابع از نوع asynchronous هستش یعنی تا تمام نشه، اونی که من میخوام رو بهم نشون نمیده. این سوال رو در استک اوفلو هم مطرح کردم و گفتن باید یک کال بک بهش اضافه کنی تا بعد از اتمام این تابع، اونی که میخوای رو برات فراخوانی کنه، نمیدونم تخصص شما کدوم زبان برنامه نویسیه اما می تونید یک این دو رو با هم به نوعی ادغام کنید تا دومی یعنی `console.log(The global va.....)` رو بیاد بعد از تابعی که بالا صحبتش رو کردم، اجرا کنه. ناگفته نمونه که تابع resizeObverver تا زمانی که متوقف نشه در زمینه به کارش ادامه میده و برای توقفش باید از تابع

resizeObserver.unobserve(container);

استفاده کنیم.

ممنون

ان متغیر داخل حلقه تازه تعریف شده ، پس در پایان حلقه هم از بین میره. اگه می خواید بعد از حلقه هم وجود داشته باشه ، باید قبل از حلقه تعریف شده باشه.

 var val=0;
let resizeObserver = new ResizeObserver((entries) => {
     for (entry of entries) {
         div.scrollTop = div.scrollHeight;          
         val = div.scrollHeight;
     }
  });