Brauzer mənbəyi yeniləndikdən sonra bir donat niyə iki alert yaradır

Bir donat niyə iki alert yaradır

Brauzer mənbəyi yeniləndikdən sonra səhifə yenidən işə düşür. Skript yenidən serverə qoşulur, hadisələrə abunə olur və bildirişlərin göstərilməsi üçün işləyicilər yaradır. Əgər köhnə işləyici silinməyibsə və ya eyni vaxtda iki qoşulma işləyirsə, bir donat hadisəsi bir neçə dəfə emal olunur.

Yeniləmənin özü mütləq nasazlığın səbəbi deyil. O, çox vaxt yalnız qoşulma məntiqindəki xətanı üzə çıxarır. Məsələn, inisializasiya funksiyası səhifə yüklənərkən, sonra bağlantı bərpa olunarkən və daha bir dəfə xidməti mesaj alındıqdan sonra işə düşə bilər. Hər işə düşmə donation hadisəsinə yeni abunəlik əlavə edir.

Nəticədə server bir donat obyekti göndərir, lakin brauzer eyni funksiyanı iki dəfə çağırır. Bəzən dublikat server tərəfində baş verir: tətbiq yeni qoşulmanı ayrı alıcı hesab edir və hadisəni həm köhnə, həm də yeni sessiyaya göndərir. Buna görə əvvəlcə təkrarın harada yarandığını müəyyən etmək lazımdır: mənbədə, işləyicidə, yoxsa göstərmə mərhələsində.

Dublikatın harada yarandığını necə tapmaq olar

Sadə testlə başlayın. Brauzer mənbəyinin linkini ayrı pəncərədə və ya tabda açın, səhifənin yalnız bir nüsxəsini buraxın və test hadisəsi göndərin. Əgər alert bir dəfə görünürsə, səbəb çox güman ki, səhnə parametrləri və ya mənbənin bir neçə nüsxəsi ilə bağlıdır. Əgər o, artıq ayrı tabda dublikat yaradırsa, səhifənin kodunu və abunəlik mexanizmini yoxlayın.

Donatın emalını bir neçə mərhələyə bölmək faydalıdır: hadisənin alınması, hadisənin yoxlanması, alertin növbəyə qoyulması və çəkilməsi. Jurnalda və ya konsolda hər mərhələdə müvəqqəti olaraq işarə çıxarın. Əgər alınma qeydi iki dəfə görünürsə, problem vizual qatdan əvvəldir. Əgər hadisə bir dəfə alınıb, lakin növbədə iki element varsa, xəta işləyicidədir. Əgər növbədə bir element var, ekranda isə iki alert varsa, göstərmə funksiyasını və HTML konteynerini yoxlayın.

Diaqnostika üçün donat məlumatlarında ötürülürsə, hər hadisəyə onun identifikatorunu əlavə edin. Bu identifikatoru alınma zamanı və göstərmədən əvvəl qeyd edin. İki çağırışda eyni identifikator bir hadisənin təkrar emal olunduğunu göstərir. İki fərqli identifikator ayrıca araşdırılmalı olan iki çatdırılmanı göstərir.

Yalnız tabların sayını yoxlamayın. OBS-də iki nüsxə səhnəni kopyaladıqdan, iç-içə səhnə əlavə etdikdən və ya eyni ünvanla brauzer mənbəyini təkrar əlavə etdikdən sonra yarana bilər. Bəzən bir mənbə ayrı qatda qalır, ikincisi isə onun üstünə əlavə olunur. Vizual olaraq bu ikiqat alert kimi görünür, halbuki hadisə bir dəfə gəlib.

Yenidən qoşulmadan sonra təkrar abunəlik

Ən çox rast gəlinən səbəb işləyicinin hər qoşulmada əlavə olunması, lakin ayrılma zamanı götürülməməsidir. Sadələşdirilmiş şəkildə problem belə görünür: funksiya alert göstərmə işləyicisi ilə socket.on işə salır, sonra bağlantı kəsilir, tətbiq yenidən qoşulur və socket.on-u təkrarlayır. Bundan sonra bir daxil olan donat iki funksiya çağırır. Növbəti yenidən qoşulmada onların sayı daha da arta bilər.

Eyni xəta adi addEventListener ilə də rast gəlinir. Əgər inisializasiya funksiyası bir neçə dəfə çağırılırsa, brauzer eyni hadisəyə bir neçə dinləyici əlavə edir. “İnisializasiya artıq yerinə yetirilib” bayrağının yoxlanması həmişə kömək etmir: səhifə tam yeniləndikdə dəyişənlər sıfırlanır, eyni səhifə daxilində yenidən qoşulma zamanı isə problem qalır.

Abunəlik qoşulmanın həyat dövrü üçün bir dəfə yaradılmalı, köhnə abunəlik isə yenidən əvvəl açıq şəkildə silinməlidir. Hadisə işləyiciləri üçün removeEventListener və qoşulma zamanı ötürülən funksiyaya eyni istinad istifadə olunur. Soketləri olan kitabxanalar üçün adətən off, unsubscribe və ya buna bənzər ayrılma üsulu tələb olunur.

Soket üçün minimal sxem belə görünə bilər: const onDonation = data => showAlert(data); socket.off('donation', onDonation); socket.on('donation', onDonation); function cleanup() { socket.off('donation', onDonation); window.removeEventListener('beforeunload', cleanup); socket.close(); } window.addEventListener('beforeunload', cleanup);

Burada konkret kitabxana deyil, hərəkətlərin ardıcıllığı vacibdir. İşləyici dəyişəndə saxlanılır, buna görə də onu eyni istinadla götürmək olar. Yeni abunəlikdən əvvəl köhnəsi silinir, səhifə bağlanarkən və ya mənbə dayandırılarkən isə cleanup yerinə yetirilir. Əgər hər işə düşmədə yeni soket yaradılırsa, əvvəlcə köhnəsini bağlamaq, yalnız sonra yenisini yaratmaq lazımdır. Əks halda hər iki qoşulma eyni məlumatları almağa davam edə bilər.

Yenidən qoşulma zamanı həmçinin köhnə bağlantını bağlayın və əlaqəli taymerləri təmizləyin. Əks halda köhnə soket yeni artıq işləyərkən məlumat almağa davam edə bilər. Bu, xüsusilə kod əvvəlkini ləğv etmədən yeni yenidən qoşulma taymeri işə saldıqda tez-tez baş verir.

OBS-də və brauzer mənbəyində nəyi yoxlamaq lazımdır

Əgər ayrı pəncərə alerti bir dəfə göstərirsə, səhnəyə keçin. Önizləməni dayandırın, artıq qatları müvəqqəti silin və bir brauzer mənbəyi buraxın. Sonra lazımi səhnədə davranışı yoxlayın. Bu test bütün səhnələri və filtrləri eyni vaxtda yoxlamaqdan daha sürətlidir.

• Eyni səhifə ünvanına malik iki mənbə axtarın.
• Eyni overlayin ola biləcəyi səhnə kopyalarını və iç-içə səhnələri yoxlayın.
• Alertin eyni vaxtda brauzer mənbəyi və eyni səhifə ilə başqa qat tərəfindən göstərilmədiyinə əmin olun.
• Parametrləri dəyişdikdən sonra yalnız səhnəni dəyişməklə deyil, mənbəyi tam yenidən işə salın.

Bəzən URL və ya parametrlər yeniləndikdən sonra OBS-də brauzer mənbəyinin köhnə tabı qalır. Mənbəyi bağlayıb yenidən əlavə etmək fərziyyəni yoxlamağa kömək edir, lakin bu, kodun düzəldilməsini əvəz etmir. Əgər hər yeniləmədən sonra problem qayıdırsa, işləyicinin təkrar qeydiyyatını və ya ikiqat qoşulmanı axtarın.

Həmçinin ayrılma gecikməsini nəzərə alın. Yeniləmə zamanı köhnə sessiya dərhal bağlanmaya bilər. Əgər server onu bir neçə saniyə aktiv hesab edirsə, bu aralıqda gələn hadisə iki sessiyaya düşə bilər. Normal server məntiqi qeyri-aktiv qoşulmaları silməli və səhifə bağlandıqdan sonra abunəliyi saxlamamalıdır.

Bir hadisənin təkrar çatdırılmasından qorunma

Brauzer mənbəyi düzgün işləsə belə, bir hadisə bəzən təkrar çatdırıla bilər. Bu, bağlantı bərpa olunarkən, mesaj təkrar göndərilərkən və ya hadisənin alınması ilə onun emalının təsdiqi arasında nasazlıq zamanı mümkündür. Buna görə alert işləyicisi təkrarlara davamlı olmalıdır.

Ən yaxşı üsul donatın unikal identifikatorunu yoxlamaqdır. Hadisəni növbəyə qoymadan əvvəl onun identifikatorunu artıq emal olunmuş hadisələr çoxluğunda saxlayın. Əgər belə identifikator artıq rast gəlinibsə, təkrarı ötürmək lazımdır. Siyahı sonsuz artmasın deyə onu məhdud müddət saxlayın.

Bunun üçün yalnız məbləği, göndərənin adını və ya mesaj mətnini istifadə etməyin. İki fərqli donatın eyni məlumatları ola bilər. Vaxta görə yoxlama da etibarsızdır: bir neçə fərqli donat demək olar ki, eyni vaxtda gələ bilər. Əgər identifikator yoxdursa, müvəqqəti olaraq sahələrin və vaxtın kombinasiyasını müqayisə etmək olar, lakin bu, iki hadisəni səhvən birləşdirmə riski olan ehtiyat variantdır.

Dublikatlardan qorunma animasiyanın içində deyil, alert göstərilməzdən əvvəl olmalıdır. Əks halda ikinci çağırış yenə səhifəyə element əlavə edəcək, səs çalacaq və ya növbəyə daha bir qeyd qoyacaq. Növbəni ayrıca nəzarət edin: bir hadisə oraya bir dəfə əlavə olunmalı, təkrar çağırış isə ikinci müstəqil növbə işə salmamalıdır.

Əgər hadisə bir neçə tab və ya komponent arasında ötürülürsə, onun eyni vaxtda bir neçə alıcı tərəfindən emal olunub-olunmadığını yoxlayın. Bir ümumi mesaj kanalı bir neçə işləyiciyə qoşula bilər. Bu halda ya bir istehlakçı buraxmaq, ya da alertin göstərilməsinə hansı komponentin cavabdeh olduğunu açıq şəkildə müəyyən etmək lazımdır.

Keşin təmizlənməsi niyə həmişə kömək etmir

Brauzer mənbəyi yeniləndikdən sonra tez-tez keşi təmizləmək məsləhət görülür. Bu, skriptin köhnə versiyası yükləndiyi halda vəziyyəti düzəldə bilər, lakin keş artıq işləyən səhifədəki artıq işləyiciləri silmir və mənbənin ikinci nüsxəsini bağlamır. Əgər dublikat hər yenidən qoşulmadan sonra davamlı təkrarlanırsa, səbəb demək olar ki, mütləq qoşulma məntiqində və ya səhnənin strukturundadır.

Faylların həqiqətən yeni versiyasının yükləndiyini yoxlayın. Resurs ünvanını müvəqqəti olaraq dəyişin və ya nəzərdə tutulmuş yeniləmə mexanizmindən istifadə edin, sonra brauzer mənbəyini yenidən işə salın. Bundan sonra bir pəncərə və mənbənin bir nüsxəsi ilə testi yenidən aparın. Linkə daim təsadüfi parametrlər əlavə etməyin: bu, çoxlu keş variantları yarada və diaqnostikanı çətinləşdirə bilər.

Əgər aralıq keş və ya service worker istifadə olunursa, o da köhnəlmiş skript verə bilər. Bu halda yüklənmiş faylın versiyasını görməyi gözlədiyiniz versiya ilə müqayisə edin. Lakin köhnə fayl olsa belə, təkrar abunəliyin səbəbini aradan qaldırmaq lazımdır, əks halda problem növbəti yeniləmədən sonra yenidən yaranacaq.

Alert kodunda nəyi yoxlamaq lazımdır

Əvvəlcə socket.on, addEventListener, qoşulma funksiyaları və növbənin işə salınmasının çağırıldığı bütün yerləri tapın. Bəzən problem bir işləyicidə deyil, iki fərqli modulun donation hadisəsini müstəqil dinləməsi və hər birinin öz göstərməsini işə salmasındadır.

Sonra alert freymvork vasitəsilə göstərilirsə, komponentin həyat dövrünü yoxlayın. Abunəlik effektdə və ya buna bənzər blokda yerləşdirilir və təmizləmə funksiyası qaytarılır. Əvvəlkini silmədən hər vəziyyət yeniləməsində yeni işləyici yaratmaq olmaz. Adi JavaScript-də səhifə dayandırılarkən onları düzgün bağlamaq üçün aktiv soketə və cari işləyiciyə istinad saxlamaq vacibdir.

Yenidən qoşulma taymerlərini yoxlayın. Yeni taymer köhnənin üstündə işə salınmamalıdır. Əks halda bir neçə kəsilmədən sonra paralel qoşulma cəhdləri, onlarla birlikdə isə əlavə abunəliklər yaranır. Hər taymer artıq lazım olmadıqda clearTimeout və ya clearInterval vasitəsilə təmizlənməlidir.

Alerti göstərən koda ayrıca baxın. O, eyni vaxtda həm element əlavə etməməli, həm də həmin obyekt üçün dərhal göstərmə funksiyasını çağırmamalıdır. Həmçinin elementin vəziyyəti dəyişdikdə animasiyanın təkrar işə düşüb-düşmədiyini yoxlayın. Əgər jurnalda bir alınma və növbədə bir qeyd varsa, ekranda isə iki bildiriş varsa, məhz burada axtarmaq lazımdır.

Diaqnostika yoxlama siyahısı: ardıcıl olaraq nə etmək lazımdır

1. Brauzer mənbəyinin URL-ni ayrı tabda açın və bir test donatı göndərin. Dublikatın OBS-dən kənarda yaranıb-yaranmadığını qeyd edin.
2. Səhnədə mənbənin yalnız bir nüsxəsini buraxın. Səhnə kopyalarını, iç-içə səhnələri və eyni ünvanın ola biləcəyi qatları yoxlayın.
3. Alınma, növbəyə qoyulma və göstərmə mərhələlərində hadisə identifikatoru ilə jurnal əlavə edin. Beləliklə obyektlərin sayının harada artdığı görünəcək.
4. socket.on və addEventListener-in bütün çağırışlarını tapın. Köhnə işləyicilərin funksiyaya eyni istinadla socket.off və removeEventListener vasitəsilə götürülüb-götürülmədiyini yoxlayın.
5. Yenidən qoşulmanı yoxlayın: köhnə soket bağlanırmı, köhnə taymer ləğv edilirmi və əvvəlkinin üstündə yeni abunəlik yaradılmırmı.
6. Növbədən əvvəl donatın unikal identifikatorunun yoxlanmasını əlavə edin, sonra mənbəyi tam yenidən işə salın və bir hadisə ilə testi təkrarlayın.

Əgər ayrı tab hadisəni bir dəfə alırsa, OBS isə iki alert göstərirsə, mənbənin ikinci nüsxəsini və ya səhnələrdə dublikatı axtarın. Əgər hadisə artıq ayrı tabda iki dəfə gəlirsə, abunəlikləri, qoşulmaları və server çatdırılmasını yoxlayın. Əgər alınma və növbə bir dəfə qeyd olunursa, ekranda isə iki bildiriş varsa, problem vizual qatdadır.