같은 방법을 여러 번 연속으로 사용

같은 방법을 여러 번 연속으로 사용

콘텍스트:

워드프레스 웹사이트에서 페이지를 전환하기 위해 Barba js를 사용하고 있으며, 페이지가 바뀔 때마다 주로 워드프레스 플러그인에서 js/css 파일을 로드해야 하기 때문에 Ajax 검색이 작동합니다.src/href 스크립트를 수신하여 헤드에 요소를 추가하는 메서드를 만들었습니다.문제는 내 코드 구조나 솔직히 잘 모르는 도서관에서 발생할 수 있다.

문제:

그 코드는 내가 호출하는 첫 번째 스크립트만 실행하며, 내가 위에서 말했듯이, 나는 그것이 내 코드에서 온 것인지 아니면 라이브러리에서 온 것인지 모르겠다!

코드:

처음에 나는 코드가 작동하기 위해 어떤 종류의 타임아웃이 필요하다고 생각했고, 그래서 이렇게 했다.

{
                namespace: 'product',
                beforeEnter(data) {
                    //loads styles
                    setTimeout(reloadStyles('ivory-search-styles-css', 'wp-content/plugins/add-search-to-menu/public/css/ivory-search.css?ver=4.4.7'), 500)

//loads javascript files.
                    setTimeout(reloadScripts('wp-content/plugins/add-search-to-menu/public/js/ivory-ajax-search.js?ver=4.4.7'), 800)
                    setTimeout(reloadScripts('/wp-content/plugins/add-search-to-menu/public/js/ivory-search.js?ver=4.4.7'), 1000)
                    setTimeout(reloadScripts('/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=5.1.7'), 1200)

                    searchTranslations()
                    // refresh breadcrumbs
                    let documentAjax = (new DOMParser()).parseFromString(data.next.html, 'text/html');
                    let breadcrumbsAjax = documentAjax.querySelector('.breadcrumbs')
                    let breadcrumbs = document.querySelector('.breadcrumbs')
                    breadcrumbs.innerHTML = breadcrumbsAjax.innerHTML;


                    logoPath.style.fill = "black"

                }
            },

이것은 원래의 코드(타임아웃 없음)입니다.

{
                namespace: 'product',
                beforeEnter(data) {

                    reloadStyles('ivory-search-styles-css', '/wp-content/plugins/add-search-to-menu/public/css/ivory-search.css?ver=4.4.7')

                    reloadScripts('/wp-content/plugins/add-search-to-menu/public/js/ivory-ajax-search.js?ver=4.4.7')
                    reloadScripts('/wp-content/plugins/add-search-to-menu/public/js/ivory-search.js?ver=4.4.7')
                    reloadScripts('/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=5.1.7')

                    searchTranslations()
                    // refresh breadcrumbs
                    let documentAjax = (new DOMParser()).parseFromString(next.html, 'text/html');
                    let breadcrumbsAjax = documentAjax.querySelector('.breadcrumbs')
                    let breadcrumbs = document.querySelector('.breadcrumbs')
                    breadcrumbs.innerHTML = breadcrumbsAjax.innerHTML;


                    logoPath.style.fill = "black"

                }
            },

잘 부탁드립니다!

편집: 이것이 방법입니다.

    const reloadScripts = (scrpSrc) => {

        console.log("Script loaded:  " + scrpSrc)

        var wpcf7 = { "apiSettings": { "root": "/wp-json\/contact-form-7\/v1", "namespace": "contact-form-7\/v1" } };

        let head = document.getElementsByTagName('head')[0]
        let script = document.createElement('script')

        script.src = scrpSrc;


        if (script != undefined || script != null) {
            head.removeChild(script)
            head.appendChild(script)
        }
        else head.appendChild(script)

    }

아래 내용을 수정해 보십시오.주요 변경사항은 스크립트를 삭제 및 추가하기 전에 잘못된 변수를 확인하는 것입니다.헤드에 스크립트가 포함되어 있는지 확인하고 제거합니다.그 후 코드를 읽기 쉽고 약간 건조하게 하기 위해 몇 가지 변경을 가했습니다.

const reloadScripts = (scrpSrc) => {
        console.log("Script loaded:  " + scrpSrc)
        const wpcf7 = { 
          "apiSettings": { 
            "root": "/wp-json\/contact-form-7\/v1", 
            "namespace": "contact-form-7\/v1" 
            } 
          };
        let head = document.querySelector('head'),
          headScript = head.querySelector('[src="='+ scrpSrc +'"]'),
          script = document.createElement('script');
         //checking if head already has a script
        if (headScript != undefined || headScript != null) {
            head.removeChild(headScript);
        }
        //then always do this piece. not DRY to have it inside and outside the if stmt
        script.src = scrpSrc;
        head.appendChild(script)
    }

언급URL : https://stackoverflow.com/questions/62060629/using-the-same-method-multiple-times-in-a-row