cancel switch javascript

[High Quality king]

Hallo Beste Tweakers,

Ik heb het volgende probleem. In javascript heb ik een switch menu met daarin per switch een aantal functies. Het probleem is, dat als ik in het switch menu van switch wissel, voordat deze functies zijn uitgevoerd, dit onverwachte resultaten oplevert.

Wat ik dus zoek is een manier om de switch te stoppen of cancellen. In chrome is dit een mooie workaround, maar in mijn internet explorer wordt alles na de stop() niet meer uitgevoerd.

JavaScript:

window.stop();

Huidige code

JavaScript:

//window.stop(); //Stopt al het voorgaande in chrome, stopt alles in IE

switch(n)
{
    case 0:
        functie1(x,y,z);
                functie2(x,y,z);
    break;
    case 1:
        functie1(x,y,z);
                functie3(y,z);
                functie5(b,y)
    break;
    case 2:
        xmlDom('xml/series.xml', iUrls, 'url');
        xmlDom('xml/series.xml', iCaptions, 'caption');
        xmlDom('xml/series.xml', iFiles, 'file');
        createSeries(iUrls);
    break;
}

Wat ik eigenlijk dus wil is dat al het voorgaande wordt gestopt, maar dat de variabelen wel behouden blijven. Is dit mogelijk (zoals in chrome)?

[André]

Wat is een switch menu? Iets zegt me dat je dit niet helemaal logisch aanpakt, alles zomaar plompverloren stoppen is veel te rigoureus, ook andere scripts stoppen er dan mee. Kun je geen voorwaarde om de switch heen zetten zodat hij alleen uitgevoerd wordt als die voorwaarde er is.

[Bosmonster]

Er zijn meerdere manieren om dit op te lossen, maar alles in een switch stoppen en zomaar alles stoppen is er daar niet 1 van. Je kunt werken met promises bijvoorbeeld om zeker te weten dat code is afgehandeld voor er met nieuwe wordt begonnen. Of je kunt werken met een queue.

Veel van dit soort logica is een standard onderdeel van moderne frameworks zoals jQuery, wat implementatie mogelijk wat vergemakkelijkt.

[ Voor 3% gewijzigd door Bosmonster op 22-03-2013 09:31 ]

[High Quality king]

André schreef op vrijdag 22 maart 2013 @ 09:22:
Wat is een switch menu? Iets zegt me dat je dit niet helemaal logisch aanpakt, alles zomaar plompverloren stoppen is veel te rigoureus, ook andere scripts stoppen er dan mee. Kun je geen voorwaarde om de switch heen zetten zodat hij alleen uitgevoerd wordt als die voorwaarde er is.

Een switch menu is wat hierboven staat. Ik heb het een beetje samengevat, want in werkelijkheid zijn er meer opties. In werkelijkheid zijn er 9 opties. Het is een alternatief voor:

JavaScript:

menuItem(n) {

if ( n == 0) { functie0() }
else if (n == 1) { functie1() }
else if (n == 2) { functie2() }
else if (n == 3) { functie3() }
else if (n == 4) { functie4() }
else if (n == 5) { functie5() }
else if (n == 6) { functie6() }
else if (n == 7) { functie7() }
else if (n == 8) { functie8() }
else if (n == 9) { functie9() }

}

Het probleem is dus, als ik eerst menuItem(0) kies, dan gaat functie0() lopen. Maar nu druk ik snel op menuItem(6), dan loopt functie0() met de daarbij behorende resultaten door en daarna functie6().

Stel dat functie0() een plaatje links laad en functie6() een plaatje rechts. Dan staan er twee plaatjes op het scherm. Als functie0() was doorlopen dan had functie6() alle eerdere elementen verwijderd, maar omdat functie0() nog niet klaar was, op het moment dat functie6() werd geladen, was het element van functie0() er nog niet om te verwijderen.

De werkelijkheid is wat ingewikkelder, maar daar komt het op neer.

[High Quality king]

Ik begrijp het niet helemaal BosMonster? Heb je een voorbeeldje?

Betekent dat dat ik voor elke statement die ik in een functie dit moet doen?

JavaScript:

if( readyState == true) { codeline; }
else{ return; }

dan wordt de code wel omvangrijk en dat werkt ook niet voor alles. Onderdeel van elke functie is dat er een ander xml bestand wordt geladen. Die moet ik bijvoorbeeld onderbreken met downloaden, maar met de code hiervoor was de readyState == true, totdat ik op het andere menu item drukte. Met als gevolg dat de xml vrolijk door gaat met downloaden.

Ik wil juist geen queue, want ik wil de code juist niet laten uitvoeren, maar vervangen door nieuwe code.

[ Voor 8% gewijzigd door High Quality king op 22-03-2013 09:53 ]

[NMe]

Waarom zit dit überhaupt in een switch en niet in aparte event handlers als er blijkbaar afhankelijk van een click per item andere code uitgevoerd moet worden?

[High Quality king]

Waarschijnlijk omdat ik een beginner ben. NMe, zou dus een event handler aan de 9 menu items hangen. Wat is het voordeel hiervan? En hoe werkt het?

Verder begrijp ik je stelling niet.

Waarom zit dit überhaupt in een switch en niet in aparte event handlers als er blijkbaar afhankelijk van een click per item andere code uitgevoerd moet worden?

Als je code hetzelfde is heb je toch geen opties nodig. Voor mij klinkt dit hetzelfde als dat je zegt, je hebt geen if statement nodig als je if en else verschillend zijn

Ow wacht ik snap het al:
de menu items, hebben niet de code per menu item, omdat er gedeeltelijk gemeenschappelijke code is.

HTML:

<a href="javascript:menuItem(0);">menuItem1</a>
<a href="javascript:menuItem(1);">menuItem2</a>
<a href="javascript:menuItem(2);">menuItem3</a>
<a href="javascript:menuItem(3);">menuItem4</a>
<a href="javascript:menuItem(4);">menuItem5</a>
<a href="javascript:menuItem(5);">menuItem6</a>
<a href="javascript:menuItem(6);">menuItem7</a>
<a href="javascript:menuItem(7);">menuItem8</a>
<a href="javascript:menuItem(8);">menuItem9</a>
<a href="javascript:menuItem(9);">menuItem10</a>

Er is dus een gemeenschappelijk gedeelte en dan komt de switch(n) waar er steeds afhankelijk van het item andere code wordt uitgevoerd. Hier zit het probleem dus, omdat het niet uit maakt als de gemeenschappelijke code 2x wordt uitgevoerd, maar wel als switch code dubbel wordt uitgevoerd. Dus wanneer zowel item0 als 5 worden uitgevoerd.

[ Voor 114% gewijzigd door High Quality king op 22-03-2013 11:39 ]

[NMe]

Ik heb geen idee wat je code moet doen, maar je zegt dat het een menu is en ik lees hierin dat je wil dat één ding gebeurt als je op het eerste item klikt, een ander ding als je op het tweede item klikt, enz. Je hebt dus al een event handler die tegelijkertijd op alle menu items hangt, en vervolgens splits je dat weer uit in die switch. Dat, of ik begrijp je grandioos verkeerd maar dan zou het helpen als je wat duidelijker bent.

[High Quality king]

Sorry duidelijk, ik heb mijn reactie aangepast. Hierboven. Het heeft dus te maken met de gemeenschappelijke code. Ik zou je graag het praktijkvoorbeeld geven, maar de vorige keer is dat weg gehaald ivm spam.

[418O2]

Haal het deel dat er niet toe doet dan uit en zet het op JSFiddle

Volgens mij ben je namelijk helemaal de verkeerde kant aan het uitdenken

[ Voor 8% gewijzigd door 418O2 op 22-03-2013 11:42 ]

[High Quality king]

Nou ja dat is dus wat ik nu gedaan heb. De gemeenschappelijke code doet er niet zo toe. Dus dit is de uitgeklede variant.

Even voor de duidelijkheid, de bovenste code in de OP werkt prima in chrome, alleen niet in IE. Er wordt gezegd dat dit te dramatisch is, maar het werkt wel. Variabelen blijven behouden en alle eerdere processen worden gestopt. Vervolgens wordt de gemeenschappelijke code uitgevoerd (nier relevant), waarna de specifieke code de inhoud op de pagina kan bepalen.

[ Voor 60% gewijzigd door High Quality king op 22-03-2013 23:48 ]

[NMe]

Je bent nog steeds de verkeerde kant uit aan het denken. Om te beginnen zijn javascript:-linkjes niet helemaal netjes; het zou beter zijn om een onclick-handler te maken. Je kan daar losse handlers gebruiken voor elk ding apart of als er een gemeenschappelijk deel is en een specifiek deel gewoon een functie voor je gemeenschappelijke deel maken, en losse functies voor alle specifieke code die je per item nodig hebt. Je hebt nu in feite allemaal uitgesplitste stukjes code die je in dezelfde trechter (die functie) stopt en daarna ín die functie weer gaat uitsplitsen.

Los daarvan is het stoppen van alle executie van al je scripts nogal grof. Als je dat nodig hebt ben je verkeerde dingen aan het doen en moet je eigenlijk gewoon wat meer lezen over de techniek waar je mee bezig bent. Dat maak ik ook al op uit de termen in je topicstart, een "switch menu" bestaat niet, "van switch wisselen" is ook niks en een "switch stoppen" heeft ook geen betekenis. Je zegt zelf al dat een switch een verkorte versie is van een lang if-statement, en daar kun je ook niet ineens spul afbreken anders dan met meer condities.

Al met al: we begrijpen niet wat je aan het doen bent maar we zijn er wel redelijk zeker van dat het niet logisch is wat je doet. Ik zou als ik jou was eens een goed boek kopen over Javascript of programmeren in het algemeen.

Overigens hebben we eerder niets van je verwijderd, behalve een linkje naar je site? Dat is spam ja. Maar je kan toch wel linken naar een uitgeklede testcase?

[High Quality king]

Ok, ik gebruik de switch dus voor precies wat jij zegt. Maar jij vindt het netter als ik de code niet in een switch stop, maar per menu item. Dat is voor mij hetzelfde als een style="" of een CSS bestand. Maar goed dat even buiten beschouwing.

Ik heb dus de functies nu even per link toegevoegd, maar dat maakt verder niet uit.

JavaScript:

clearClearAbles(); // Leegt het content gedeelte van de pagina en reset alle relevante variabelen.
xmlDom('xml/series.xml', iUrls, 'url'); // gemeenschappelijke functie steeds een ander XML bestand.
xmlDom('xml/series.xml', iCaptions, 'caption'); // en steeds weer andere variabele
xmlDom('xml/series.xml', iFiles, 'file');  // en weer andere variabele
createSeries(iUrls); //specifiek voor item

het probleem treedt op als ik dit laat uitvoeren:

JavaScript:

clearClearAbles(); // Leegt het content gedeelte van de pagina en reset alle relevante variabelen.
xmlDom('xml/portretten.xml', iUrls, 'url'); // gemeenschappelijke functie steeds een ander XML bestand.
xmlDom('xml/portretten.xml', iCaptions, 'caption'); // en steeds weer andere variabele
createPortretten(iUrls); //specifiek voor item

Omdat de vorige functies niet zijn gestopt. Knalt hij nog steeds de uitkomst van xml/series in de Array iUrls. De nieuwe xmlDom knalt daar de portretten bij. Als deze klaar of half klaar zijn, plaatst createSeries(iUrls) de foto's bijvoorbeeld links en createPortretten(iUrls) bijvoorbeeld rechts.

Wat er moet gebeuren voordat het tweede blok code wordt geladen, is dus dat het eerste blok moet worden gestopt. Dan kunnen de variabelen worden gecleared met clearClearAbles(); Zonder dat zij hierna worden overruled door een nog lopende eerdere functie.

Ik verwacht nu dat wordt gesuggereerd dat ik voorwaarden moet stellen aan het eerste blok, voordat het tweede blok moet worden gestart. Maar ja blok 1 preload 40 foto's, daar is hij wel even mee bezig. Dus de kans dat je ergens halverwege bent is niet gering, wanneer je op de volgende link drukt.

Ik wil dus eigenlijk alleen de dingen in het eerste codeblock stoppen voordat ik het tweede begin. Dat is misschien minder grof dan de hele pagina (ook mijn wens), maar ik weet niet hoe dat moet.

Ik wil dus eigenlijk iets van stop alle xmlDom instanties en alle specifieke instanties. En begin dan met mijn nieuwe code.

[ Voor 7% gewijzigd door High Quality king op 22-03-2013 12:29 ]

[NMe]

High Quality king schreef op vrijdag 22 maart 2013 @ 12:20:
Ok, ik gebruik de switch dus voor precies wat jij zegt. Maar jij vindt het netter als ik de code niet in een switch stop, maar per menu item. Dat is voor mij hetzelfde als een style="" of een CSS bestand. Maar goed dat even buiten beschouwing.

Je hebt het verkeerde beeld, denk ik.

HTML:

<a href="#" onclick="algemeneFunctie(); specifiekeFunctieVoorItem1(); return false;">Menu-item 1</a>
<a href="#" onclick="algemeneFunctie(); specifiekeFunctieVoorItem2(); return false;">Menu-item 2</a>

Met zoiets ben je al een heel eind. Wat jij deed kan ook wel maar het zorgt voor een draak van een functie als je meer dan 4-5 items hebt.

JavaScript:

clearClearAbles(); // Leegt het content gedeelte van de pagina en reset alle relevante variabelen.
xmlDom('xml/series.xml', iUrls, 'url'); // gemeenschappelijke functie steeds een ander XML bestand.
xmlDom('xml/series.xml', iCaptions, 'caption'); // en steeds weer andere variabele
xmlDom('xml/series.xml', iFiles, 'file');  // en weer andere variabele
createSeries(iUrls); //specifiek voor item

het probleem treedt op als ik dit laat uitvoeren:

JavaScript:

clearClearAbles(); // Leegt het content gedeelte van de pagina en reset alle relevante variabelen.
xmlDom('xml/portretten.xml', iUrls, 'url'); // gemeenschappelijke functie steeds een ander XML bestand.
xmlDom('xml/portretten.xml', iCaptions, 'caption'); // en steeds weer andere variabele
createPortretten(iUrls); //specifiek voor item

Call me crazy, maar ik zie hier steeds dezelfde code? Stel jouw functie heet menuItem, dan kun je hem toch zo opzetten?

JavaScript:

function menuItem(fileName, functionName) {
    clearClearAbles();
    xmlDom(fileName, iUrls, 'url');
    xmlDom(fileName, iCaptions, 'caption');
    window[functionName](iUrls);
}

...en vervolgens zo gebruiken in je code?

HTML:

<a href="#" onclick="menuItem('xml/series.xml', 'createSeries'); return false">menuItem1</a>
<a href="#" onclick="menuItem('xml/portretten.xml', 'createPortretten'); return false">menuItem2</a>
<a href="#" onclick="menuItem('xml/enz.xml', 'enzovoorts'); return false">menuItem3</a>

Ineens heb je nog steeds één korte functie voor alles wat je wil doen in één keer zonder dat lompe switch-geval. Zelfs als dit iets is dat terugkomt bij de helft van de menu-items en de andere helft niet kun je dan alsnog twee functies maken voor die twee mogelijkheden.

Een variabele functie aanroepen kan vast beter dan dit maar ik weet niet zeker hoe de standaard-javascriptsyntax daarvoor in elkaar zit.

Omdat de vorige functies niet zijn gestopt. Knalt hij nog steeds de uitkomst van xml/series in de Array iUrls. De nieuwe xmlDom knalt daar de portretten bij. Als deze klaar of half klaar zijn, plaatst createSeries(iUrls) de foto's bijvoorbeeld links en createPortretten(iUrls) bijvoorbeeld rechts.

Wat jij blijkbaar wil is niet je switch stoppen maar je request en afhandeling van die XML-file stoppen. Hoe je dat doet hangt af van de werking daarvan...

[MrBrown]

Allereerst: de code is vies. Alsjeblieft, attach gewoon handlers, ets.

Is daarnaast een andere aanpak niet beter: een volgende actie niet starten als de vorige nog niet is afgehandeld?

JavaScript:

var busy = false;
function doStuff() {
  if(!busy) {
   busy=true;
   doStuffThatTakesALotOfTime();
   busy=false;
  }
}

Iets dergelijks?

[NMe]

MrBrown schreef op vrijdag 22 maart 2013 @ 13:52:
Allereerst: de code is vies. Alsjeblieft, attach gewoon handlers, ets.

Is daarnaast een andere aanpak niet beter: een volgende actie niet starten als de vorige nog niet is afgehandeld?

JavaScript:

var busy = false;
function doStuff() {
  if(!busy) {
   busy=true;
   doStuffThatTakesALotOfTime();
   busy=false;
  }
}

Iets dergelijks?

Mwoah, dat kun je beter logica inbouwen om alle acties te stoppen die op dat moment al bezig zijn. Als gebruiker wil ik dat het laatste menu-item waar ik op klik ook daadwerkelijk uitgevoerd wordt.

Overigens hoop ik voor de TS dat die site niet door Google geïndexeerd hoeft te worden, want dan kom je bedrogen uit met deze constructie.

[MrBrown]

NMe schreef op vrijdag 22 maart 2013 @ 13:55:
[...]

Mwoah, dat kun je beter logica inbouwen om alle acties te stoppen die op dat moment al bezig zijn. Als gebruiker wil ik dat het laatste menu-item waar ik op klik ook daadwerkelijk uitgevoerd wordt.

Overigens hoop ik voor de TS dat die site niet door Google geïndexeerd hoeft te worden, want dan kom je bedrogen uit met deze constructie.

Ben ik het mee eens, maar ik heb het idee dat TS niet helemaal thuis is in het netjes eea afhandelen, en dan is mijn constructie veiliger . Rücksichtslos alles maar afbreken zonder nette afhandeling brengt je weer in de volgende problemen...

edit:
eigenlijk wil je de xmlDom handlers cancelen, is het niet? Wat is de implementatie van die xmlDom functie? Geeft die geen reference terug naar een object, waarmee je de actie kan cancelen?

[ Voor 12% gewijzigd door MrBrown op 22-03-2013 14:08 ]

[High Quality king]

Ja eigenlijk wil ik de xmlDom handlers cancelen, maar ook de functie die erna komt niet meer laten uitvoeren. Ik zou in mijn switch voorbeeld misschien het nummer kunnen gebruiken van het menuItem om te controleren of het uitvoeren van dit Item nog wel actueel is. Maar dat is in jullie ogen vieze code... Ik stuntel ook maar wat aan .

@mrBrown: Ik ben niet thuis in het netjes afhandelen van de functies en de syntax van javascript daarom vraag ik er ook om. Jouw constructie zou minuten duren voor dat een volgend menu item wordt geladen, omdat er dan eerst nog 40 andere foto's geladen moeten worden. Met als gevolg dat mensen nog een keer gaan klikken of afhaken, waardoor je nog 10x dezelfde functie moet laden.

@NMe: Je hebt gelijk over:

JavaScript:

function menuItem(fileName, functionName) { 
    clearClearAbles(); 
    xmlDom(fileName, iUrls, 'url'); 
    xmlDom(fileName, iCaptions, 'caption'); 
    window[functionName](iUrls); 
}

Alleen als je goed oplet zie je dat niet in iedere case het aantal variabelen gelijk is. De eene keer 3 xmlDom's de andere keer maar 2. De window functionName kende ik nog niet die ga ik zeker gebruiken thanx. Waar is die return false; voor?

xmlDom implementatie is alsvolgt

JavaScript:

function xmlDom(xmlFile, arrayName, attributeToGet)
{
    if (window.XMLHttpRequest)
    {
        xhttp=new XMLHttpRequest();
    }
    else // for IE 5/6
    {
        xhttp=new ActiveXObject("Microsoft.XMLHTTP");
    };

    xhttp.open("GET",xmlFile,false);
    xhttp.send();
    xmlDoc=xhttp.responseXML;
    itemName=xmlDoc.getElementsByTagName('photo');

    for (i=0;i<itemName.length;i++)
    {
        arrayName[i] = itemName[i].getAttribute(attributeToGet);
    };
};

Ik vind het vervelend om code 2x te moeten schrijven, omdat ik dan bij optimalisatie het ook 2x moet aanpassen. Vandaar dat ik van het switch model gebruik maak, omdat ik dan al het algemene op 1 plek heb staan net voor de switch en al het specifieke in de switch. Verder heeft op die manier ieder menu item een nummer, zodat ik kan zeggen: if( n == 1 || n == 5){} else {}.

[NMe]

High Quality king schreef op vrijdag 22 maart 2013 @ 14:57:
@NMe: Je hebt gelijk over:

JavaScript:

function menuItem(fileName, functionName) { 
    clearClearAbles(); 
    xmlDom(fileName, iUrls, 'url'); 
    xmlDom(fileName, iCaptions, 'caption'); 
    window[functionName](iUrls); 
}

Alleen als je goed oplet zie je dat niet in iedere case het aantal variabelen gelijk is. De eene keer 3 xmlDom's de andere keer maar 2. De window functionName kende ik nog niet die ga ik zeker gebruiken thanx. Waar is die return false; voor?

Die window['functienaam']() is dan weer niet heel erg netjes volgens mij, ik geloof dat er nettere manieren zijn om een variabele functienaam aan te spreken. Ik weet gewoon even niet meer hoe dat in native JS moet omdat ik een framework gebruik dat dit soort dingen voor me oplost.

Die return false zorgt ervoor dat de click verder niet afgehandeld wordt en de browser dus niet na je javascript ook nog eens naar # gaat browsen. Je zou eventueel per menuitem de href kunnen veranderen in #menuitemnaam en dan in je script bij de eerste load de data inladen die daarbij hoort zodat je ook links kan uitwisselen en daarbij zou je die return false weglaten, maar dat is voor later zorg.

[MrBrown]

Ok, ik weet niet precies waar de oorzaak van je vertraging zit: bij het inladen van de xml, of bij het loopen van de xml en het vervolgens vullen van die array.

Misschien zou je kunnen beginnen met maar 1 XMLHttpRequest per pagina te gebruiken, ipv in je method telkens een nieuwe aan te maken. Daardoor kan je in principe niet tegelijkertijd meerdere xmls ophalen, scheelt al een hoop.

JavaScript:

function getXHttp()
{ 
    if (window.XMLHttpRequest) 
    { 
        xhttp=new XMLHttpRequest(); 
    } 
    else // for IE 5/6 
    { 
        xhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    };
    return xhttp;
}

var globalXhttp=getXHttp();

function xmlDom(xmlFile, arrayName, attributeToGet) 
{ 
    // misschien eerst (preventief) je request cancelen met globalXhttp.abort();? Moet je wel even kijken of je de status moet checken voordat je dit doet.
    globalXhttp.open("GET",xmlFile,false); 
    globalXhttp.send(); 
    xmlDoc=xhttp.responseXML; 
    itemName=xmlDoc.getElementsByTagName('photo'); 

    for (i=0;i<itemName.length;i++) 
    { 
        arrayName[i] = itemName[i].getAttribute(attributeToGet); 
    }; 
};

[MueR]

NMe schreef op vrijdag 22 maart 2013 @ 15:22:
[...]

Die window['functienaam']() is dan weer niet heel erg netjes volgens mij, ik geloof dat er nettere manieren zijn om een variabele functienaam aan te spreken. Ik weet gewoon even niet meer hoe dat in native JS moet omdat ik een framework gebruik dat dit soort dingen voor me oplost.

Dat is de correcte manier om functies binnen een scope aan te roepen ja.

[High Quality king]

@MrBrown: Begrijp ik je code nu goed als ik zie dat ik xmlDom aanroep zoals ik dat nu al doe. En dat xmlDom dan getXHttp aanroept?

In dat geval gebeurd er toch nog steeds hetzelfde? Dan wordt toch ook weer bij iedere instantie van xmlDom het xml bestand opnieuw geladen? Dat is toch dezelfde situatie als nu? Waarin dus de code opnieuw wordt geladen, nadat de vorige klaar is?

Ik denk dat ik het niet begrijp.

Ik begrijp wel je punt dat ik eigenlijk een apparte functie moet maken voor het aanroepen van mijn XML en dan een andere functie om steeds uit dat zelfde bestand de attributen te halen, zonder steeds de XML opnieuw te laden.

[ Voor 21% gewijzigd door High Quality king op 22-03-2013 15:46 ]

[MueR]

Dat weet ik wel zeker.. Door je XMLHttpRequest eenmalig aan een variabele toe te wijzen gebruik je steeds dezelfde connectie, waardoor je niet elke keer resources opnieuw aanmaakt. Zie het als elke keer over dezelfde weg rijden in plaats van steeds een nieuwe te aan te leggen. Elke keer dat je nu de variabele globalxhttp aanspreekt wordt de reference naar het request gebruikt, de functie wordt niet steeds opnieuw uitgevoerd.

[ Voor 21% gewijzigd door MueR op 22-03-2013 15:47 ]

[High Quality king]

Ah ok, dankjewel voor de uitleg MueR, ik denk dat ik het snap. Verder is het misschien ook mooier om het getAttribute te splitsen van het getXML gedeelte misschien. Super bedankt. Ik heb morgen avond de tijd om het allemaal te implementeren. Ik laat het jullie zo snel mogelijk weten of het allemaal werkt. Super bedankt weer!

Ik zal verder in het specifieke gedeelte elke functie laten checken of hij nog wel actueel is bij iedere uitvoering. Dat zal ook helpen, vermoed ik.

[High Quality king]

Helaas geen succes.

Ik heb de code aangepast met een voorwaarde voor de abort. Vooralsnog is de window.stop() de enige oplossing. Kan ik ook een instantie stilleggen ipv de hele pagina. Iets van xmlDom.abort() ofzo?

JavaScript:

function getXHttp() 
{  
    if (window.XMLHttpRequest)  
    {  
        xhttp=new XMLHttpRequest();  
    }  
    else // for IE 5/6  
    {  
        xhttp=new ActiveXObject("Microsoft.XMLHTTP");  
    }; 
    return xhttp; 
} 

var globalXhttp=getXHttp(); 

function xmlDom(xmlFile, arrayName, attributeToGet, n)  
{  
    if ( n != navPos ) 
    {
        globalXhttp.abort();
    } 
    else
    {
        globalXhttp.open("GET",xmlFile,false);  
        globalXhttp.send();  
        xmlDoc=xhttp.responseXML;  
        itemName=xmlDoc.getElementsByTagName('photo');  

        for (i=0;i<itemName.length;i++)  
        {  
            arrayName[i] = itemName[i].getAttribute(attributeToGet);  
        };
    };
};

Helaas geen succes dus.

[R4gnax]

High Quality king schreef op vrijdag 22 maart 2013 @ 23:44:
Helaas geen succes.

Ik heb de code aangepast met een voorwaarde voor de abort. Vooralsnog is de window.stop() de enige oplossing. Kan ik ook een instantie stilleggen ipv de hele pagina. Iets van xmlDom.abort() ofzo?

Misschien wordt het gewoon tijd om te erkennen dat dit stuk programmeerwerk boven je pet gaat. Leg het weg en ga eerst eens leren hoe de taal werkt. Lees eens wat meer over DOM of over abstractielagen als jQuery. Zoek eens wat artikelen die over het probleem gaan wat je hier poogt op te lossen. etc.

Als je daarna nog steeds niet het inzicht hebt om dit probleem te tacklen, dan moet je misschien toch maar je portemonnee trekken en iemand anders gaan inschakelen: niet iedereen is voor programmeerwerk in de wieg gelegd.

[NMe]

Je kan je request aborten, niet je functie...

Ik ga me bij R4gnax aansluiten. Je bent dingen aan het proberen te implementeren nog voordat je begrijpt hoe ze werken. Zo kun je gewoon niet programmeren, dat levert niks op. We kunnen je nou wel aan het handje nemen en het probleem voor je oplossen maar aangezien we dat hierboven al letterlijk hebben gedaan is de enige andere oplossing die we je kunnen geven een compleet werkend codevoorbeeld. Als je de uitleg al niet snapt, snap je de code helemaal niet.

Dus ook hier: niet om lullig te doen, maar je zal je écht iets meer moeten gaan inlezen in Javascript en AJAX. Met AJAX ben je per definitie dingen asynchroon aan het doen en dat vergt een denkwijze die je nu gewoon nog niet beheerst. Dat is niet erg, maar het is nu een beetje als in Peking in het Engels om route-aanwijzingen vragen en vervolgens geen stap verder komen omdat je de straatnaambordjes niet kan lezen.

[High Quality king]

Nee geen probleem, ik snap het. Bedankt voor jullie hulp tot zover in ieder geval. Ik heb immers al een werkende oplossing, alleen nog niet voor IE.

Het is niet dat ik de asynchrone denkwijze niet beheers hoor trouwens, meer de syntax van javascript. Ik weet precies wat er gebeurd en wanneer het gebeurd, waarom het gebeurd. Daarom ook mijn window.stop(), ik weet precies wat ik stop en het werkt ook allemaal prima. Alleen niet in IE, omdat de browsers niet hetzelfde doen met die functie. Ik ben niet degene die voorstelt te gaan wachten tot er 40 beelden geladen zijn voordat het volgende menu item geladen mag worden en ook niet degene die een voorbeeld van wat het moet worden spam noemt.

Het kan misschien allemaal wat netter en leesbaarder, maar ik weet echt wel wat ik aan het doen ben. Ik vertel over mijn switch die ik gebruik voor een menu en dat noem ik dan een switch menu. Tuurlijk weet ik dat een switch menu niet bestaat, net als dat een trekezel niet bestaat. Maar het is wel zo, dat als je een ezel een trekezel noemt, dat je dan weet dat die ezel iets moet trekken. Syntax is ondergeschikt aan semantiek, maar voor een computer niet natuurlijk . 90% van al mijn bugs ontstaat omdat ik ergens ; ben vergeten neer te kwakken.

Ik zal de functies wel weer even herschrijven en dan komt het ook wel weer goed, leer ik weer van. Het idee is er, nu komt het structureren en optimaliseren.

Ik kwam hier met de vraag of het ook mogelijk is een window.stop() te doen in internet explorer, omdat de implementatie daar anders is, maar ik heb hier niemand over document.execCommand('Stop') gehoord bijvoorbeeld. Alleen maar dat mijn switch niet deugt en mijn code vies is.

Het is ook duidelijk een kwestie van smaak dat programmeren van jullie. Ik ben meer een aanhanger van het monolitisch model, dan het modulaire verhaal. Liever Assembler dan C++, maar ja ieder zijn dingetjes.

Ik ga lezen en proberen. Bruteforcen is ook een manier van werken .

Bedankt.

[ Voor 86% gewijzigd door High Quality king op 23-03-2013 20:34 ]

[R4gnax]

High Quality king schreef op zaterdag 23 maart 2013 @ 19:23:
Nee geen probleem, ik snap het. Bedankt voor jullie hulp tot zover in ieder geval. Ik heb immers al een werkende oplossing, alleen nog niet voor IE.

Deel van het probleem hier is dat je niet eens herkend dat dit niet een werkende oplossing is. Deze 'oplossing' stoelt op een curieus, niet formeel gedocumenteerd of gespecificeerd randgeval in de implementatie van verbindingen gestart door het XhmlHttpRequest in Firefox en Chrome. Dat gedrag kan en mag, omdat het niet formeel vastligt, in principe met elke nieuwe browser versie veranderen...

[High Quality king]

Ja Webkit en Gecko eigenlijk, maar ja ik kom ook niet voor niets naar dit forum. Dom foutje idd met de implementatie van de abort(), die moet natuurlijk in het algemene gedeelte van mijn switch menu .

Alles is opgelost, bedankt voor de pointers.

[ Voor 49% gewijzigd door High Quality king op 23-03-2013 21:38 ]

[Bosmonster]

Volgens mij snap ik nu dat je met een "switch menu", gewoon een switch case statement bedoelt

[High Quality king]

Bosmonster schreef op maandag 25 maart 2013 @ 11:38:
Volgens mij snap ik nu dat je met een "switch menu", gewoon een switch case statement bedoelt

Precies, waarvan de case afhankelijk is van het menu item dat wordt gekozen. Super bedankt nogmaals voor al jullie hulp. Ik heb een werkende versie, zonder window.stop() of de IE variant daarvan. Ik ben nu alleen nog opzoek naar de syntax van een image request abort. Ik heb al wel de onabort event handler gevonden voor het image object, maar de daadwerkelijke manier van een abort uitschrijven op een image request nog niet.

Of is dat gewoon img.abort() net als bij de xmlHttpRequests?

[NMe]

Wat is een image request?

[MrBrown]

NMe schreef op woensdag 27 maart 2013 @ 12:11:
Wat is een image request?

Hij laadt een xml in met image data, en zal daarna (denk ik) in een loop die images opvragen. Denk dat hij bedoeld dat hij die requests wil stoppen.

Ik blijf erbij dat de initiele aanpak niet lekker is, en dat TS wat meer achtergrond moet opdoen van async in js, event handling, etc etc. Misschien toch maar een (jquery) framework gebruiken ook? Dan wordt er in ieder geval een abstractielaag overheen gelegd die wat browser quirks wegneemt....

[NMe]

Mijn punt is dat de TS wederom termen gebruikt die niet bestaan wat er alleen maar op duidt dat hij niet weet wat hij aan het doen is. Een image request bestaat niet. Of een request nou een image ophaalt, een stuk HTML of een stuk JS boeit geen reet, als je het op dezelfde manier doet is het hetzelfde ding. Het is niet ineens een image request, een HTML-request of een JS-request.

Verder is het aan de ene kant goed om jQuery aan te raden omdat er een hele hoop minder in fout kan gaan, maar op het moment dat je nog niet goed door hebt hoe het zónder framework werkt/hoort kun je beter eerst tijd steken in het leren daarvan.

Het hele idee is in elk geval dat je je request uitzet en dat je daar vervolgens niet op gaat zitten wachten maar dat je gewoon doorgaat met ander spul. Je wil een onSuccess-eventhandler (of in native-JS: in een xmlhttp.onreadystatechange je readystate en HTTP-status checken) voor je request die vanzelf aangeroepen wordt als je request klaar is. Wanneer je een nieuw request doet abort je eerst het oude.

[High Quality king]

...

Met XML laad ik een rits urls die in XML attributen zijn opgeslagen. Die stopt hij in een array, vervolgens laad ik met Javascript een image. Als die image klaar is met laden, laad ik de volgende image (dit doe ik om te voorkomen dat ik 40 images moet aborteren ipv 1 en omdat de positie en dimensies van de image afhankelijk zijn van de vorige (dat dan dus al geladen moet zijn)), mits het nummer van het item overeen komt met het laatst gelade menu item.

JavaScript:

var img = new Image(); 
    img.src = arr[i]; 
        img.onload = function() 
        { 
                    if( n == navPos){ volgendePlaatje(i+1);} // zit ook nog een voorwaarde in dat hij alleen de array length neemt, maar dat is nu niet relevant.
               }

op http://w3schools.com/jsref/event_img_onabort.asp hebben ze het over een abort event, maar ik weet niet hoe ik het aanroep.

Wat ik nu dus vraag is of iemand weet hoe ik het GET request van mijn browser voor het image kan aborteren. Volgens stackoverflow kan het niet, dus ik zet nu de opacity op 0 en voorkom dat een volgende geladen wordt.

[ Voor 63% gewijzigd door High Quality king op 27-03-2013 22:16 ]

[MrBrown]

Onabort is een event wat afgaat, en kan je dus niet aanroepen.

En waarom haal je het image wat je wil afbreken niet gewoon uit de DOM?

[High Quality king]

Maar hoe gaat dat af dan? Door een window.stop() bijvoorbeeld? Want onerror is weer een ander event. Het bestaan van het event suggereert dat er een abort is, die abort kan ik alleen niet vinden.

Met uit de DOM halen bedoel je dan:

JavaScript:

img.src = "";

of iets anders?

[ Voor 7% gewijzigd door High Quality king op 27-03-2013 22:36 ]

[MrBrown]

een onabort event suggereert dat het laden van een img afgebroken kan worden. Niet dat jij dat kan doen. Er is ook geen error() method omdat er een onerror event is. Ik kan me voorstellen dat onabort afgaat als er tijdens het laden een connection reset van de server is ofzo. Heb het event zelf nooit gebruikt.

Over de DOM: jij tekent neem ik aan ook ergens het plaatje op het scherm. Tenminste, het zal niet alleen in de javascript blijven bestaan. Hoe je dat doet weet ik weer niet natuurlijk, maar als je ergens op een gegeven moment het plaatje ziet, staat het in de DOM, en daar kan je 'm ook weer uit halen..

[High Quality king]

letterlijk teken ik het op het scherm idd :

code:

document.getElementById("holder").appendChild(imgCanvas); 
context = imgCanvas.getContext("2d"); 
context.drawImage(img,  0 , 0 , dim[0] , dim[1]);

Ik zou verwachten dat time outs en resets als errors beschouwd zullen worden. En interactieve zaken (dingen die ik doe) als abort, maar ik kan er buiten die w3cschool link die ik eerder gaf, geen documentatie over vinden.

Maar uit de DOM halen bedoel je dus dit:

JavaScript:

while(content.firstChild)
    {
        content.removeChild(content.firstChild);
    }

[ Voor 14% gewijzigd door High Quality king op 27-03-2013 22:52 ]

[R4gnax]

High Quality king schreef op woensdag 27 maart 2013 @ 20:52:
Wat ik nu dus vraag is of iemand weet hoe ik het GET request van mijn browser voor het image kan aborteren. Volgens stackoverflow kan het niet, dus ik zet nu de opacity op 0 en voorkom dat een volgende geladen wordt.

Het laden van een plaatje kun je inderdaad niet met de hand afbreken. Sterker nog; dankzij buggy implementaties van het error event in IE is het zelfs onmogelijk om betrouwbaar te detecteren dat het laden van een plaatje door de browser gestopt is. Je zult gedwongen gebruik moeten maken van een timeout.

Het makkelijkste wat je kunt doen is afstappen van rauwe DOM en jQuery gaan gebruiken. Dat handelt een heleboel van de complexiteit rondom aysnchrone requests en event bindings al voor je af. De jQuery API reference bevat daarnaast onder de sectie betr. ajax prefilters, converters en transports ook een stuk voorbeeldcode om plaatjes te downloaden via $.ajax zodat je netjes done/fail handlers kunt gebruiken.

High Quality king schreef op woensdag 27 maart 2013 @ 22:47:
maar ik kan er buiten die w3cschool link die ik eerder gaf, geen documentatie over vinden.

Het is 'w3schools' en ze hebben absoluut 100% niets te maken met het W3 Consortium. Sterker nog; ze zijn door het W3C meermalig verzocht om aan te geven dat ze niet met het W3C geassocieerd zijn, maar geven hier geen gehoor aan. Een mogelijke conclusie die je daaruit kunt trekken is dat ze moedwillig misbruik van deze associatie maken om zichzelf op de kaart te houden.

Gezien de kwaliteit van die site zou me dat ook niets verbazen...

[ Voor 63% gewijzigd door R4gnax op 28-03-2013 09:08 ]

[High Quality king]

Bedankt voor alle info R4gnax, ik ga eens een goed jquery boek kopen. Ben alleen wel een beetje bang dat er dan weer hetzelfde gebeurd als er ooit met flash gebeurde, toen ik dat onder de knie had.

Goed te weten van w3school, dat was namelijk mijn hoofdbron van informartie. Ik ga opzoek naar een beter alternatief.