jQuery 3로 전환 한 후 '로드'이벤트/함수가 실행되지 않는 이유는 무엇입니까?

Question

jQuery 1.x/jQuery 2.x에서 jQuery 3.x으로 업그레이드 했으므로 기존 코드가 더 이상 올바르게 실행되지 않습니다. 모든 것이 잘 작동하지만, load 이벤트 리스너는 더 이상하거나 때로는 트리거를 가져옵니다 : jQuery 3로 전환/사용하는 경우

$(function() { 
    $(window).on("load", function() { 
     // this line will never/occasionally be executed 
     console.log("window is loaded!"); 
    }); 
}); 

Answer 1

문제가 발생 할 수 있습니다. 새 jQuery 3에있는 ready states이 이제 완전히 asynchron이기 때문입니다. 즉, 코드가 실행되도록 지정된 순서가 없음을 의미합니다. 이 때문에

, 당신의 ready state이 실행 된 이전 load이 트리거 된 것을, 발생할 수 있습니다. ready 함수가 마침내 트리거되면 사용자의 load 수신기가 너무 늦어서 실행되지 않습니다.

---

jQuery를 사용 :

그냥 load 이벤트 리스너 초기화 주위 ready state을 제거,이 동작을 변경하려면. 이것을 ready 함수로 캡슐화 할 필요가 없습니다. 당신은 그것들을 초기화하지 않고도 초기화 할 수 있습니다. 당신이 필요하거나 두 이벤트를 등록 할 경우

// $(function() { 
    $(window).on("load", function() { 
     // this line will now be executed again 
     console.log("window is loaded!"); 
    }); 
// }); 

, 당신은 자신에 의해 load 이벤트를 등록하고 다음에 무엇을해야 하는지를 ready state 내부를 결정할 수 있습니다.

// track the loading state by yourself 
var windowLoaded = false; 
$(window).on("load", function() { 
    windowLoaded = true; 
}); 

$(function() { 
    function afterLoad() { 
     console.log("loaded"); 
    } 

    // decide inside your ready state what to do 
    if(!windowLoaded) { 
     $(window).on("load", afterLoad); 
    } 
    else { 
     afterLoad(); 
    } 
}); 

---

jQuery를 플러그인

:

또 다른 경우는 너무 load 이벤트를 사용하여 jQuery를 플러그인 될 것입니다. 해결책은 load 이벤트를 추적하는 것입니다

$(function() { 
    $("#element").myPlugin(); 
}); 

예를 들어 : 개발자/사용자가 지금 ready state에 플러그인 초기화를 감싸는 경우 이전

는

(function($, window) { 
    $.fn.myPlugin = function() { 
     $(window).on("load", start); 

     function start() { 
      console.log("plugin initialized and window loaded"); 
     } 
    }; 
})(jQuery, window); 

문제는 같은 설명, 다시 일어날 수 귀하의 플러그인에서 을의 ready state으로 세분화하십시오.

(function($, window) { 
    // track the loading state beside the plugin initialization 
    var windowLoaded = false; 
    $(window).on("load", function() { 
     windowLoaded = true; 
    }); 

    $.fn.myPlugin = function() { 
     // decide inside your plugin how to start 
     if(!windowLoaded) { 
      $(window).on("load", start); 
     } 
     else { 
      start(); 
     } 

     function start() { 
      console.log("plugin initialized and window loaded"); 
     } 
    }; 
})(jQuery, window); 

---

결론 : jQuery 3를 사용하는 경우 다른 사용자가/다른 브라우저를 실행할 수 있기 때문에이 문제가되지 당신에게 일어나는

경우에도, 귀하의 테스트에서, 당신은, 바로 그 코드를 변경해야 이 문제로. 다른 사람은 asynchron이기 때문에 문제가 생길 수 있습니다. 코드가 실행되면 언제/알 수 있습니까?