I want you to optimize your coding experience #247

New Issue

2022-07-24T03:03:43-05:00

EmptyDreams commented

2022-07-24 03:03:43 -05:00

(Migrated from github.com)

Now, if I need to write code that executes after the page loads, and it needs to execute on every page, I need to write:

const task = () => {......}
document.addEventListener(‘DOMContentLoaded’, task)
document.addEventListener('pjax:success', task)

The reason for registering both events is that the DOMContentLoaded event will not be executed if the JS is not loaded the first time the page is opened, and pjax:success will not be executed if the JS is loaded the first time the page is opened.

To make matters worse, if the code is embedded in an HTML document (that is, the code only needs to be executed on this page), I need to write:

const task = () => {......}
document.addEventListener(‘DOMContentLoaded’, task)
document.addEventListener('pjax:success', task)
document.addEventListener('pjax:send', function fun() {
    document.removeEventListener('pjax:success', task)
    document.removeEventListener('pjax:send', fun)
})

Because if I don't manually delete the event, the pjax:success event registered on this page will still be executed after I jump to another page, so I have to manually delete the pjax:success event registered on this page. (DOMContentLoaded doesn't matter because it only executes once.)

So I want to be able to add an event that is executed after the current page's DOM has been loaded, no matter how many times it has been loaded.

Now, if I need to write code that executes after the page loads, and it needs to execute on every page, I need to write: ```javascript const task = () => {......} document.addEventListener(‘DOMContentLoaded’, task) document.addEventListener('pjax:success', task) ``` The reason for registering both events is that the DOMContentLoaded event will not be executed if the JS is not loaded the first time the page is opened, and pjax:success will not be executed if the JS is loaded the first time the page is opened. To make matters worse, if the code is embedded in an HTML document (that is, the code only needs to be executed on this page), I need to write: ```javascript const task = () => {......} document.addEventListener(‘DOMContentLoaded’, task) document.addEventListener('pjax:success', task) document.addEventListener('pjax:send', function fun() { document.removeEventListener('pjax:success', task) document.removeEventListener('pjax:send', fun) }) ``` Because if I don't manually delete the event, the pjax:success event registered on this page will still be executed after I jump to another page, so I have to manually delete the pjax:success event registered on this page. (DOMContentLoaded doesn't matter because it only executes once.) So I want to be able to add an event that is executed after the current page's DOM has been loaded, no matter how many times it has been loaded.

EmptyDreams commented

2022-08-12 08:48:00 -05:00

(Migrated from github.com)

The second code can be changed to look like this:

const task = () => { ...... }
document.addEventListener('DOMContentLoaded', task)
document..addEventListener('pjax:success', function fun() {
    document.removeEventListener('pjax:success', fun)
    task()
})

So far I have solved this problem by manual encapsulation, I wrote the following in a JS that will be loaded by all pages:

document.addEventListener('DOMContentLoaded', () => {
    const pushEvent = () => document.dispatchEvent(new Event('kms:loaded'))
    pushEvent()
    document.addEventListener('pjax:success', pushEvent)
})

Then use it elsewhere:

document.addEventListener('kms:loaded', function fun() {
    document.removeEventListener('kms:loaded', fun)
    // do something...
})

The second code can be changed to look like this: ```js const task = () => { ...... } document.addEventListener('DOMContentLoaded', task) document..addEventListener('pjax:success', function fun() { document.removeEventListener('pjax:success', fun) task() }) ``` So far I have solved this problem by manual encapsulation, I wrote the following in a JS that will be loaded by all pages: ```js document.addEventListener('DOMContentLoaded', () => { const pushEvent = () => document.dispatchEvent(new Event('kms:loaded')) pushEvent() document.addEventListener('pjax:success', pushEvent) }) ``` Then use it elsewhere: ```js document.addEventListener('kms:loaded', function fun() { document.removeEventListener('kms:loaded', fun) // do something... }) ```

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: iLoveElysia/pjax#247