5

Mein JavaScript wird zweimal ausgeführt. Bei der Ausführung des Chrome-Debuggers habe ich festgestellt, dass die einzelne JavaScript-Datei den Code zum ersten Mal ausführt, und danach führt die Datei application.js den Code erneut aus.Rails Asset-Pipeline: JavaScript wird zweimal ausgeführt

Ich glaube, das passiert, weil ich kürzlich Precompile ausgeschaltet habe, weil ich Probleme mit Heroku hatte. Danach lief ich rake assets:precompile.

Antwort

8

Turbolinks

Sie wahrscheinlich haben ein Problem mit Turbolinks (unter Berücksichtigung Sie es in Ihrem Asset-Pipeline aufgenommen haben); obwohl dies nicht das Problem sein könnte.

Turbolinks soll die Ladezeiten Ihrer Seite beschleunigen, indem Sie das <body>-Tag Ihrer neuen Seiten mit ajax laden und das -Tag intakt halten. Dies bedeutet, dass Ihre Anwendung nur den benötigten HTML-Code laden kann, jedoch den JS auf Ihrer Seite durcheinander bringt.

Wenn Sie Ihre JS zweimal gefeuert haben, könnte ein Zeichen sein, dass Turbolinks Ihren JS stört. Da Sie keine Beispiele aus der logs enthalten haben, kann ich Ihnen keine spezifischen Informationen geben, aber Sie sollten in der Lage sein, dies zu testen, indem Sie die turbolinks-Datei aus Ihrer layout und Ihrer application Manifest-JS-Datei entfernen:

#app/views/layouts/application.html.erb 
= javascript_include_tag "application", "data-turbolinks-track" => false 

#app/assets/javascripts/application.js 
//= require turbolinks -> remove this line 

Wenn Sie dies tun, starten Sie Ihren Server neu & laden Sie die betreffende Seite neu. Wenn es immer noch zurück mit der irrigen Funktionalität kommt, bedeutet dies Turbolinks nicht das Problem ist (und Sie sollten alle die Dinge, setzen Sie geändert)

-

Events

Das andere Problem, das Sie könnte haben ist, wie Sie Ihre Ereignisse aufrufen/auslösen. Dies könnte auf eine Reihe von Gründen, aber Sie sollten auf jeden Fall sehen Sie, wie Sie Ihre JS sind anrufen:

#app/assets/javascripts/application.js 
$(document).on("click", ".element", function(){ 
    //your stuff here 
}); 

Wir delegieren immer vom document Element des DOM jetzt. Obwohl dies zu einigen Ressourcenproblemen führen kann, haben wir festgestellt, dass Rails-Apps mit der Asset-Pipeline wesentlich robuster sind, da Sie Elemente auf der Seite wirklich identifizieren können.

Wenn Sie versuchen, ein Ereignis von einem einzelnen Objekt in Ihrem DOM auszulösen, stellen Sie möglicherweise fest, dass JS das Ereignis zweimal (aus welchem ​​Grund auch immer) "erfasst", was zu Ihrem Problem führt. Versuchen Sie, Ihre Events zu delegieren, die zweimal

genannt werden -

Funktionen

Schließlich Ihre functions das Problem sein könnte.Wenn Sie anonymous functions oder Funktionen für bestimmte Ereignisse haben, müssen Sie sicherstellen, dass sie korrekt aufgerufen werden können. Sie sollten dies tun, indem page events in JS mit & Turbolinks:

#app/assets/javascripts/application.js 
var your_function = function() { 
    //stuff here 
}; 

$(document).on("page:load ready", your_function); 
+0

Ich benutze keine Turbolinks, es sei denn, es ist automatisch in Schienen enthalten 3.2.13 – user2158382

+0

oder es ist nicht im Bootstrap enthalten 3 – user2158382

+2

Danke für die großartige Erklärung Richard –

1

ich dieses Problem erfahren, weil die Asset-Pipeline, die sowohl jquery, jquery-UJS und Schienen-UJS:

//= require jquery 
 
//= require jquery_ujs 
 
//= require rails_ujs 
 
//= require bootstrap 
 
//= require turbolinks 
 
//= require_tree .

entfernt rails_ujs und alles war in Ordnung.

Verwandte Themen