Voorkomen dat Javascript meerdere malen wordt uitgevoerd

[Erhnam]

Ik heb een content.php vanuit waar ik een ajax.php aanhaal bij bepaalde situaties. Normaal zou ik alle javascript code in de header plaatsen, echter als de ajax.php nog niet is aangeroepen zijn bepaalde objecten nog niet in beeld en werkt het geheel niet. Vandaar dat een specifieke javascript code in de ajax.php staat.

Echter kan het ook voorkomen dat de ajax.php meerdere malen wordt geladen. Wat er dan gebeurt, zie ik via de console log, dat de javascript code meerdere malen wordt afgevuurd. Dus voor iedere keer hjet laden van de ajax.php een keer extra. Is er een manier om dit te voorkomen of vast te stellen of bepaalde javascript code al actief is?

Om het probleem nog wat meer duidelijk te maken, de volgende code staat als voorbeeld in de ajax.php:

code:

<script>
  var handledCount = 0;
  console.log('aantal:' + handledCount);
  handledCount++;
</script>

Wat ik dan in de console zie bij bijvoorbeeld een enkele klik:

code:

aantal:1
aantal:1
aantal:1

Het lijkt alsof er verschillende instanties naast elkaar leven en dus acties spuwen.

[ Voor 23% gewijzigd door Erhnam op 09-04-2013 20:34 ]

[Xyzer]

Erhnam schreef op dinsdag 09 april 2013 @ 20:25:
zijn bepaalde objecten nog niet in beeld

Ik weet niet wat je precies uitvoert in je JavaScript code, maar als je bijvoorbeeld iets zichtbaar maakt op de pagina met de code kan je kijken of het al zichtbaar is en als dat het geval is de JavaScript code daarop laten stoppen.

[Erhnam]

Xyzer schreef op dinsdag 09 april 2013 @ 20:30:
[...]
Ik weet niet wat je precies uitvoert in je JavaScript code, maar als je bijvoorbeeld iets zichtbaar maakt op de pagina met de code kan je kijken of het al zichtbaar is en als dat het geval is de JavaScript code daarop laten stoppen.

Zoiets wil ik ook. Bijvoorbeeld een aan en uit knop door op te klikken beweegt het. Echter bij het klikken gaat de button meerdere malen op en neer, omdat meerdere instanties naast elkaar leven.

[Delusion]

Heb je al geprobeerd om in je head een variable te plaatsen die de state bijhoudt en in je ajax.php, daarop gecheckt wordt?

[ Voor 3% gewijzigd door Delusion op 09-04-2013 20:36 ]

[Erhnam]

Delusion schreef op dinsdag 09 april 2013 @ 20:34:
Heb je al geprobeerd om in je head een variable te plaatsen die de state bijhoudt en in je ajax.php, daarop gecheckt wordt?

Net even geprobeerd:

code:

$("head").append("<meta name="ajaxcheck" content="loaded"/>");

vanuit de content.php werkt dit wel, maar vanuit de ajax.php wordt er niks aan de header toegevoegd

[mcDavid]

Waarom doe je niet gewoon de success functie van je ajax-call gebruiken in plaats van scripts in je response te zetten?

[Erhnam]

mcDavid schreef op dinsdag 09 april 2013 @ 20:53:
Waarom doe je niet gewoon de success functie van je ajax-call gebruiken in plaats van scripts in je response te zetten?

Bedankt voor de suggestie. Het is een bestaande post jquery procedure, maar ik ben nu in de data functie na het ophalen de afleidingen aan het doen. Dit lijkt goed te werken.

EDIT: Het probleem komt wederom op hetzelfde neer. De ajax functie doet "$this.find('.content').append(data);" en voegt op die manier steeds nieuwe items toe, maar de functies dus ook.

[ Voor 18% gewijzigd door Erhnam op 09-04-2013 22:20 ]

[MrBrown]

Ik zou toch, zoals mcDavid ook al zei, kijken of je de bestaande code zo kan aanpassen dat je netjes met eventhandlers werkt. Door scripts inline te laden en meteen uit te voeren werk je je vroeger of later in de nesten....

[Bosmonster]

Erhnam schreef op dinsdag 09 april 2013 @ 21:53:
[...]


Bedankt voor de suggestie. Het is een bestaande post jquery procedure, maar ik ben nu in de data functie na het ophalen de afleidingen aan het doen. Dit lijkt goed te werken.

EDIT: Het probleem komt wederom op hetzelfde neer. De ajax functie doet "$this.find('.content').append(data);" en voegt op die manier steeds nieuwe items toe, maar de functies dus ook.

Zoek eens op jquery event delegation.

En als je toch dynamisch scripts in wil laden, doe dat dan met bijvoorbeeld een uitgebreid getest framework als http://requirejs.org/. Gaat je een hoop hoofdpijn schelen.

[ Voor 14% gewijzigd door Bosmonster op 10-04-2013 10:01 ]

[Erhnam]

Fraai is het niet, maar voor tijdelijk heb ik een oplossing die lijkt te werken. Ik houd een teller bij hoe vaak de ajax wordt aangeroepen en voorzie de elementen die ik wil targetten met een class die overeenkomt met de keer dat ajax wordt aangeroepen. In de JS doe ik dan een if HasClass om te voorkomen dat het eea te vaak wordt aangeroepen.

[MrBrown]

Erhnam schreef op woensdag 10 april 2013 @ 12:05:
Fraai is het niet, maar voor tijdelijk heb ik een oplossing die lijkt te werken. Ik houd een teller bij hoe vaak de ajax wordt aangeroepen en voorzie de elementen die ik wil targetten met een class die overeenkomt met de keer dat ajax wordt aangeroepen. In de JS doe ik dan een if HasClass om te voorkomen dat het eea te vaak wordt aangeroepen.

Dan hoop ik dat dit je eigen, en enige, project is. Want over een 3 maanden snap je niet meer waarom je eea nou op deze manier hebt gedaan, en als een ander je code moet onderhouden snapt ie er al helemaal niets meer van... Klinkt mij een beetje als pleisters plakken.

[Erhnam]

MrBrown schreef op woensdag 10 april 2013 @ 12:21:
[...]

Dan hoop ik dat dit je eigen, en enige, project is. Want over een 3 maanden snap je niet meer waarom je eea nou op deze manier hebt gedaan, en als een ander je code moet onderhouden snapt ie er al helemaal niets meer van... Klinkt mij een beetje als pleisters plakken.

Het is opensource projectje waar ik momenteel als enige gebruik van maak. Code staat wel op GitHub. Hierbij maak ik gebruik van een bestaand JQuery script. In dit laatste zit ook meteen het probleem. Een pleister inderdaad voor de time being en mocht ik later wat meer tijd hebben zal ik delen herschrijven zodat het wel goed en lekker loopt.

[Erhnam]

Ik ben nu delen van mijn project aan het herschrijven, maar blijf met een soort gelijk probleem zitten. Via de jquery load functie wil een iedere keer verschillend php script aanroepen. Daarbij roep ik voor een van de php pagina's ook een functie aan.

code:

$("div.detail").click(function() {
 $('section').load('detailed-view.php', function() {
  loadscrollPagination();
 });
});

Als er op een andere button gedrukt wordt kan er bijvoorbeeld ook een "list-view.php" of een "block-view.php", etc worden aangeroepen.

Probleem wederom is dat de functie loadscrollPagination in het geheugen blijft staan en dus meerdere keren actief is op het object. (Ik zie dit omdat ik in jquery-scroll-pagination script een aantal debug regels zijn gezet.)

Zelfs als ik met behulp van empty of destroy het object #content verwijder komt de functie toch weer meedere keren terug.

Is er een goede manier om dit af te handelen?

code:

function loadscrollPagination() {
 setTimeout(function() {
  $('#content').scrollPagination({
                nop     : 10, // The number of posts per scroll to be loaded
                offset  : 0, // Initial offset, begins at 0 in this case
                error   : 'No More Posts!', // When the user reaches the end this is the message that is
                delay   : 500, // When you scroll down the posts will load after a delayed amount of time.
                scroll  : true // The main bit, if set to false posts will not load as the user scrolls.
  });
 }, 100);
}

[ Voor 4% gewijzigd door Erhnam op 16-05-2013 22:35 ]

[R4gnax]

Erhnam schreef op donderdag 16 mei 2013 @ 22:30:
Is er een goede manier om dit af te handelen?

Stoppen met hacken en even eerst goed over de architectuur van je applicatie nadenken. Maak bijvoorbeeld je view rendering clientside en stuur gewoon JSON naar de client i.p.v. serverside gerenderde HTML waar nog script tags in rond zweven.

[Erhnam]

R4gnax schreef op vrijdag 17 mei 2013 @ 09:12:
[...]
Stoppen met hacken en even eerst goed over de architectuur van je applicatie nadenken. Maak bijvoorbeeld je view rendering clientside en stuur gewoon JSON naar de client i.p.v. serverside gerenderde HTML waar nog script tags in rond zweven.

Ik ben er al uit. Inderdaad door meer delen naar de clientside over te hevelen. In het loadscrollPagination script wordt de functie geactiveerd op de algehele scroll:

code:

$(window).scroll(function() {

Dit heb ik vervangen door met een on en off functie te werken. Dus:

code:

$(window).on('scroll', function() {

Als de json klaar dan doe ik een off met:

code:

$(window).off("scroll");