JavaScript ei odottele suorituksen valmistumista

Tein oheisen testin omassa localhostissa ja hyvinhän tuo toimi:

<body onload="pageScroll()">
//your content
<script>
var speed = 15;
function pageScroll(){
window.scrollBy(0,100);
scrolldelay = setTimeout(pageScroll,speed);
let Stop = document.documentElement.scrollHeight;
let KurPos = window.innerHeight window.scrollY;
if (KurPos == Stop){
clearTimeout(scrolldelay);
window.scroll(0,0);
alert("Tehtävä suoritettu");
}
}
</script>

Selain rullaa ensin koko sivun sisällön läpi ja lopuksi näyttää hälyn "Tehtävä suoritettu!".

Anonyymi kirjoitti:

Tein oheisen testin omassa localhostissa ja hyvinhän tuo toimi:

<body onload="pageScroll()">
//your content
<script>
var speed = 15;
function pageScroll(){
window.scrollBy(0,100);
scrolldelay = setTimeout(pageScroll,speed);
let Stop = document.documentElement.scrollHeight;
let KurPos = window.innerHeight window.scrollY;
if (KurPos == Stop){
clearTimeout(scrolldelay);
window.scroll(0,0);
alert("Tehtävä suoritettu");
}
}
</script>

Selain rullaa ensin koko sivun sisällön läpi ja lopuksi näyttää hälyn "Tehtävä suoritettu!".

Joo, noin se kyllä toimii, mutta kun tämä tulee olemaan osa muuta ohjelmaa, jossa tuo;

alert("Tehtävä suoritettu");

korvataan joukolla muita funktioita ja tapahtumia. Eli ei voida yhdistää tuolla tavalla. Täytyisi pystyä säilyttämään tuo kutsurakenne

function start() {
pageScroll();
alert('Tehtävä, on suoritettu!');
}

Anonyymi kirjoitti:

Joo, noin se kyllä toimii, mutta kun tämä tulee olemaan osa muuta ohjelmaa, jossa tuo;

alert("Tehtävä suoritettu");

korvataan joukolla muita funktioita ja tapahtumia. Eli ei voida yhdistää tuolla tavalla. Täytyisi pystyä säilyttämään tuo kutsurakenne

function start() {
pageScroll();
alert('Tehtävä, on suoritettu!');
}

Siinä tapauksessa jQuery voisi olla avuksi:

<body>
//your content
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
var speed = 15;
function pageScroll(){
window.scrollBy(0,100);
scrolldelay = setTimeout(pageScroll,speed);
let Stop = document.documentElement.scrollHeight;
let KurPos = window.innerHeight window.scrollY;
if (KurPos >= Stop){
clearTimeout(scrolldelay);
window.scroll(0,0);
alert("Tehtävä suoritettu!");
}
}
$(document).ready(function(){
pageScroll();
})
</script>

Tuosta muuntamalla omiin tarpeisiin... ehkä...

Anonyymi kirjoitti:

Siinä tapauksessa jQuery voisi olla avuksi:

<body>
//your content
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
var speed = 15;
function pageScroll(){
window.scrollBy(0,100);
scrolldelay = setTimeout(pageScroll,speed);
let Stop = document.documentElement.scrollHeight;
let KurPos = window.innerHeight window.scrollY;
if (KurPos >= Stop){
clearTimeout(scrolldelay);
window.scroll(0,0);
alert("Tehtävä suoritettu!");
}
}
$(document).ready(function(){
pageScroll();
})
</script>

Tuosta muuntamalla omiin tarpeisiin... ehkä...

Mutta tuossahan on edelleen tuon

alert("Tehtävä suoritettu!");

kutsun suorittajana on se vieritys funktio, eikä sitä saisi kutsua tuolla vieritys funktion sisältä, koska se tullaan korvaamaan vielä tuntemattomalla määrällä muita funktioita ja tapahtumia.

Anonyymi kirjoitti:

Mutta tuossahan on edelleen tuon

alert("Tehtävä suoritettu!");

kutsun suorittajana on se vieritys funktio, eikä sitä saisi kutsua tuolla vieritys funktion sisältä, koska se tullaan korvaamaan vielä tuntemattomalla määrällä muita funktioita ja tapahtumia.

Rakenna joku kikkakolmonen tyyliin "piilotettu div" jonka arvoa muuttamalla triggeroit sen alertin siinä vaiheessa kun se systeemisi tarpeisiin sopii. Minulle ei avaudu kertomuksestasi tarpeesi niin että pystyisin hahmottamaan sitä scripteiksi asti eli täältä tähän.

Kävin katsomassa, vaikuttaa oikealta mutta soveltaminen vaatii tarkempaa perehtymistä, palaan asiaan.

Anonyymi kirjoitti:

Kävin katsomassa, vaikuttaa oikealta mutta soveltaminen vaatii tarkempaa perehtymistä, palaan asiaan.

Tunnin kohta sohrannut, ja vain virheitä pukkaa, eikö löytyisi helpompaa keinoa.

Kyllä se suorittaa, mutta suoritukset valmistuvat milloin valmistuvat. Suorituksen päätyttyä kutsutaan callback-funktiota.

Jossain vaiheessa tulee callback-hell. https://blog.hellojs.org/asynchronous-javascript-from-callback-hell-to-async-and-await-9b9ceb63c8e8

Javascriptillä ohjelmointi vaatii hieman erilaista ajattelutapaa.

Jos menet edellä kerrotun pb:n saitille ja lisäät osoitteen perään

/y4tcB75Y

niin löydät yhden simppelin esimerkkitoteutuksen missä ajastimella viivästytetään viestin näyttämistä kunnes edellinen skripti on loppuun ajettu.

Anonyymi kirjoitti:

Jos menet edellä kerrotun pb:n saitille ja lisäät osoitteen perään

/y4tcB75Y

niin löydät yhden simppelin esimerkkitoteutuksen missä ajastimella viivästytetään viestin näyttämistä kunnes edellinen skripti on loppuun ajettu.

Ja, kyllähän minä menin.

Sehän toimi, eikä ollenkaan ollut riippuvainen asetetusta ajasta, riitti kunhan se oli olemassa. Tässä on mielenkiintoista se että minä jo testasin saman, mutta puhtaasti HTML ja JavaScript yhdistelmänä. Sinulla tuo oli PHP, HTML ja JavaScript yhdistelmä, jossa tiedostomuotona *.php.

Nyt minun pitää testata tuota korvaamalla tuo PHP JavaScript osuudella, ja katso toimiiko puhtaasti HTML JavaScript yhdistelmänä jossa tiedostomuoto *.html. Palaan asiaan, tuonnempana.

Anonyymi kirjoitti:

Ja, kyllähän minä menin.

Sehän toimi, eikä ollenkaan ollut riippuvainen asetetusta ajasta, riitti kunhan se oli olemassa. Tässä on mielenkiintoista se että minä jo testasin saman, mutta puhtaasti HTML ja JavaScript yhdistelmänä. Sinulla tuo oli PHP, HTML ja JavaScript yhdistelmä, jossa tiedostomuotona *.php.

Nyt minun pitää testata tuota korvaamalla tuo PHP JavaScript osuudella, ja katso toimiiko puhtaasti HTML JavaScript yhdistelmänä jossa tiedostomuoto *.html. Palaan asiaan, tuonnempana.

php-palanen on mukana vain siksi että sillä voi helposti säätää testailusivun pituutta ja havaita että se kuittiviesti tulee todellakin vasta lopuksi oli sivulla rivejä 100 vaiko 2000 tai ylikin. Kyseisen osion voi huoletta korvata perus-html -tekstillä ja lopputulos on tasan sama.

Anonyymi kirjoitti:

php-palanen on mukana vain siksi että sillä voi helposti säätää testailusivun pituutta ja havaita että se kuittiviesti tulee todellakin vasta lopuksi oli sivulla rivejä 100 vaiko 2000 tai ylikin. Kyseisen osion voi huoletta korvata perus-html -tekstillä ja lopputulos on tasan sama.

No niin, muutin PHP koodin JavaScript koodiksi. Tein myös paremin tilannetta kuvaavat viestidialogien sanomat, että voisit vielä ratkaista tämän jäljelle jääneen ongelman.

https://pastebin.com/K4za064n

ROPOLLE LINKIN VUOKSI
Jopa luovien näkemysten huomiointi näyttelee keskeistä osaa pohdittaessa ongelmanratkaisukyvyn huipentumaa. Täytyy siitä huolimatta että maailmalla on viime aikoina tapahtunut paljon, todeta, että emotionaalinen perikato parantaa viimeaikaisia absurdeja väittämiä.

Me emme tiedä mitä tapahtuu todella, jos yleisesti suositeltava toimintamalli järkeistää käsitystämme kyseisestä asiakokonaisuudesta, mihin tavallaan liittyy myös järjestelmän ulkopuolelle jääneitä epäonnistuneita prosesseja. Jos vertailemme lyhyesti asiaankuuluvia ilmiöitä, huomaamme, että organisaation uusi toimintakaavio asettaa tahomme tukalaan tilanteeseen ajateltaessa hyvinvoivan yhteiskunnan rinnalle muodostuneita epäkohtia.

Täytyy siitä huolimatta että maailmalla on viime aikoina tapahtunut paljon, todeta, että normaali substanssi ennakoi osaltaan peräänkuulutettua lakonisuutta. Vaikka osaltamme onkin saatettu syyllistyä laiminlyönteihin, voidaan taholtamme kuitenkin todeta, että ratifioituja ominaisuuksia omaava vaihtoehto pakottaa kohderyhmää huomioimaan viimeaikaisia absurdeja väittämiä.

Anonyymi kirjoitti:

No niin, muutin PHP koodin JavaScript koodiksi. Tein myös paremin tilannetta kuvaavat viestidialogien sanomat, että voisit vielä ratkaista tämän jäljelle jääneen ongelman.

https://pastebin.com/K4za064n

ROPOLLE LINKIN VUOKSI
Jopa luovien näkemysten huomiointi näyttelee keskeistä osaa pohdittaessa ongelmanratkaisukyvyn huipentumaa. Täytyy siitä huolimatta että maailmalla on viime aikoina tapahtunut paljon, todeta, että emotionaalinen perikato parantaa viimeaikaisia absurdeja väittämiä.

Me emme tiedä mitä tapahtuu todella, jos yleisesti suositeltava toimintamalli järkeistää käsitystämme kyseisestä asiakokonaisuudesta, mihin tavallaan liittyy myös järjestelmän ulkopuolelle jääneitä epäonnistuneita prosesseja. Jos vertailemme lyhyesti asiaankuuluvia ilmiöitä, huomaamme, että organisaation uusi toimintakaavio asettaa tahomme tukalaan tilanteeseen ajateltaessa hyvinvoivan yhteiskunnan rinnalle muodostuneita epäkohtia.

Täytyy siitä huolimatta että maailmalla on viime aikoina tapahtunut paljon, todeta, että normaali substanssi ennakoi osaltaan peräänkuulutettua lakonisuutta. Vaikka osaltamme onkin saatettu syyllistyä laiminlyönteihin, voidaan taholtamme kuitenkin todeta, että ratifioituja ominaisuuksia omaava vaihtoehto pakottaa kohderyhmää huomioimaan viimeaikaisia absurdeja väittämiä.

Latasin muokatun version aamullisen päälle - samalla pb:n koodilla siis.
Olisiko se taas askeleen lähempänä päämäärää.

Anonyymi kirjoitti:

Latasin muokatun version aamullisen päälle - samalla pb:n koodilla siis.
Olisiko se taas askeleen lähempänä päämäärää.

No joo, eikö tuohon ole muuta ratkaisua kuin Interval -viivyttäminen jokaiselle suoritettavalle tehtävälle, että ne tapahtuisi ajallisesti oikeassa järjestyksessä. Tuntus että pakkohan siihen olisi olla olemassa jotain muutakin. Pitäisiköhän yrittää JQuery puolelta hakea, kun natiivi JavaScript ei kykene suoritusjärjestystä säilyttämään.

Anonyymi kirjoitti:

No joo, eikö tuohon ole muuta ratkaisua kuin Interval -viivyttäminen jokaiselle suoritettavalle tehtävälle, että ne tapahtuisi ajallisesti oikeassa järjestyksessä. Tuntus että pakkohan siihen olisi olla olemassa jotain muutakin. Pitäisiköhän yrittää JQuery puolelta hakea, kun natiivi JavaScript ei kykene suoritusjärjestystä säilyttämään.

Suoritusjärjestys on ihan oikea. Eri asiat vaan valmistuvat eri aikoina.

Opettele vaan se async/await -tapa. Silloin ohjelmat eivät "jauha" turhaan, ja seuraava funktio aloitetaan vasta edellisen päätyttyä.

Anonyymi kirjoitti:

Suoritusjärjestys on ihan oikea. Eri asiat vaan valmistuvat eri aikoina.

Opettele vaan se async/await -tapa. Silloin ohjelmat eivät "jauha" turhaan, ja seuraava funktio aloitetaan vasta edellisen päätyttyä.

Me pyöriteltiin koko ajan setInterval() funktiota joka on tarkoitettu jaksottamaan tehtäviä tietyin väliajoin, esimerkiksi kellon sekuntiviisaria pitäisi siirtää toistuvasti eri asentoon sekunnin välin;

setInterval(MoveClockPointer(), 1000);

Mutta kun haluat asettaa herätyksen tunnin päähän tästä hetkestä, tulisi käyttää;

setTimeout(WakeUp(), 3600000);

Eli näihin ajastamistarpeisiin on ainakin kaksi natiivia funktiota olemassa, mutta eipä taida asiaa auttaa yhtään.

Anonyymi kirjoitti:

Me pyöriteltiin koko ajan setInterval() funktiota joka on tarkoitettu jaksottamaan tehtäviä tietyin väliajoin, esimerkiksi kellon sekuntiviisaria pitäisi siirtää toistuvasti eri asentoon sekunnin välin;

setInterval(MoveClockPointer(), 1000);

Mutta kun haluat asettaa herätyksen tunnin päähän tästä hetkestä, tulisi käyttää;

setTimeout(WakeUp(), 3600000);

Eli näihin ajastamistarpeisiin on ainakin kaksi natiivia funktiota olemassa, mutta eipä taida asiaa auttaa yhtään.

Joo, intervalli kutsuu samaa funktiota yhä uudelleen, kunnes ajastin lopetetaan. Timeout suorittaa funktion puolestaan vain kerran.

Tässä esimerkissä sekuntikello käy seuraavaan tasaminuuttiin, jonka jälkeen ajastin poistetaan.

const odota = () => {
const ajastin = setInterval(() => {
const aika = new Date();
process.stdout.clearLine();
process.stdout.write('\r' aika.toLocaleTimeString());
if(aika.getSeconds() == 0) lopeta();
}, 1000);
const lopeta = () => {
clearInterval(ajastin);
console.log();
}
}
odota();

Anonyymi kirjoitti:

Joo, intervalli kutsuu samaa funktiota yhä uudelleen, kunnes ajastin lopetetaan. Timeout suorittaa funktion puolestaan vain kerran.

Tässä esimerkissä sekuntikello käy seuraavaan tasaminuuttiin, jonka jälkeen ajastin poistetaan.

const odota = () => {
const ajastin = setInterval(() => {
const aika = new Date();
process.stdout.clearLine();
process.stdout.write('\r' aika.toLocaleTimeString());
if(aika.getSeconds() == 0) lopeta();
}, 1000);
const lopeta = () => {
clearInterval(ajastin);
console.log();
}
}
odota();

Tässä vielä tapa miten voi käyttää asyncin ja awaitin kanssa.

const odotaSekunti = () =>
new Promise(funktio => setTimeout(funktio, 1000));

const odotaPariKertaa = async () => {
console.log('Nolla sekuntia mennyt');
await odotaSekunti();
console.log('Sekunti mennyt');
await odotaSekunti();
console.log('Toinen sekunti mennyt');
}

odotaPariKertaa();

Anonyymi kirjoitti:

Joo, intervalli kutsuu samaa funktiota yhä uudelleen, kunnes ajastin lopetetaan. Timeout suorittaa funktion puolestaan vain kerran.

Tässä esimerkissä sekuntikello käy seuraavaan tasaminuuttiin, jonka jälkeen ajastin poistetaan.

const odota = () => {
const ajastin = setInterval(() => {
const aika = new Date();
process.stdout.clearLine();
process.stdout.write('\r' aika.toLocaleTimeString());
if(aika.getSeconds() == 0) lopeta();
}, 1000);
const lopeta = () => {
clearInterval(ajastin);
console.log();
}
}
odota();

Tässä taas Interval-funktio on oikein peruselementissään, nimittäin kun ajat tuon consolissa (Ctrl Shift J), näet kellon ajan selaimen välilehden otsakkeena.

var myVar = setInterval(myTimer, 1000);
function myTimer() {
var d = new Date();
var t = d.toLocaleTimeString();
document.title = t;
}

Anonyymi kirjoitti:

Tässä taas Interval-funktio on oikein peruselementissään, nimittäin kun ajat tuon consolissa (Ctrl Shift J), näet kellon ajan selaimen välilehden otsakkeena.

var myVar = setInterval(myTimer, 1000);
function myTimer() {
var d = new Date();
var t = d.toLocaleTimeString();
document.title = t;
}

Tuo pika näppäin yhdistelmä (Ctrl Shift J) saattaa olla vain tämän Chromium selaimen ominaisuuksia, ehkä se on muissa F12 ja sitten valitaan Console -välilehti käsin.

Anonyymi kirjoitti:

Tässä vielä tapa miten voi käyttää asyncin ja awaitin kanssa.

const odotaSekunti = () =>
new Promise(funktio => setTimeout(funktio, 1000));

const odotaPariKertaa = async () => {
console.log('Nolla sekuntia mennyt');
await odotaSekunti();
console.log('Sekunti mennyt');
await odotaSekunti();
console.log('Toinen sekunti mennyt');
}

odotaPariKertaa();

Tuossakin esimerkissäsi odotetaan ajan täyttymistä että päästää tehtävä suorittamaan, mutta tarve olisi odottaa tehtävän päättymistä ja vielä niin että se ei ole kiinni siitä kuinka kauan se vie, ja odottaessa valmistumista, ei ohjelma saisi edetä ollenkaan.

Tässä valossa, ei ole mitään huolta siitä että selainsovellukset valtaisivat työpöytäsovellusten paikan. Paljon pystyy tekemään, mutta erittäin tärkeitä ominaisuuksia puuttuu, ja nähtävästi kyse on tietoturvallisuuden säilyttämisestä kun näitä puutteita ei korjata.

Anonyymi kirjoitti:

Tuossakin esimerkissäsi odotetaan ajan täyttymistä että päästää tehtävä suorittamaan, mutta tarve olisi odottaa tehtävän päättymistä ja vielä niin että se ei ole kiinni siitä kuinka kauan se vie, ja odottaessa valmistumista, ei ohjelma saisi edetä ollenkaan.

Tässä valossa, ei ole mitään huolta siitä että selainsovellukset valtaisivat työpöytäsovellusten paikan. Paljon pystyy tekemään, mutta erittäin tärkeitä ominaisuuksia puuttuu, ja nähtävästi kyse on tietoturvallisuuden säilyttämisestä kun näitä puutteita ei korjata.

Juu se oli vain "väkisin väännetty" esimerkiksi, kun joku valitteli ettei "pysy järjestyksessä".

Palvelinpuolen javascriptillä asiat tehdään yleensä asynkronisesti, jottei tarvitse jäädä odottelemaan jonkun asian valmistumista. Eli kun homma valmistuu, niin kutsutaan callback-funktiota jne. Mutta nykyään pystyy async/await -yhdistelmällä käyttämään promise-tyylisiä juttuja helpommin.

Anonyymi kirjoitti:

Tuossakin esimerkissäsi odotetaan ajan täyttymistä että päästää tehtävä suorittamaan, mutta tarve olisi odottaa tehtävän päättymistä ja vielä niin että se ei ole kiinni siitä kuinka kauan se vie, ja odottaessa valmistumista, ei ohjelma saisi edetä ollenkaan.

Tässä valossa, ei ole mitään huolta siitä että selainsovellukset valtaisivat työpöytäsovellusten paikan. Paljon pystyy tekemään, mutta erittäin tärkeitä ominaisuuksia puuttuu, ja nähtävästi kyse on tietoturvallisuuden säilyttämisestä kun näitä puutteita ei korjata.

Tuossa on yksi esimerkki fetchin käytöstä, joka hakee jotain netistä. Kuten näet, niin koodi lyhenee async/awaitilla aika paljon siitä, mitä oli aiemmin pelkkien promisien kanssa.

https://dev.to/shoupn/javascript-fetch-api-and-using-asyncawait-47mp

Anonyymi kirjoitti:

Tuossa on yksi esimerkki fetchin käytöstä, joka hakee jotain netistä. Kuten näet, niin koodi lyhenee async/awaitilla aika paljon siitä, mitä oli aiemmin pelkkien promisien kanssa.

https://dev.to/shoupn/javascript-fetch-api-and-using-asyncawait-47mp

Niin näkyy tekevän, ei se tuostaan voi enää lyhentyä. github.com esimerkit näyttivät toimivan. Tuohonkin täytyy perehtyä, onko tuosta await ja async yhdistelmästä apua sivun aukaisussa, jossa on aina keksittävä jonkinlainen viivytys siksi aikaa kun sivu kerkiää valmistua kokonaan.

Anonyymi kirjoitti:

Niin näkyy tekevän, ei se tuostaan voi enää lyhentyä. github.com esimerkit näyttivät toimivan. Tuohonkin täytyy perehtyä, onko tuosta await ja async yhdistelmästä apua sivun aukaisussa, jossa on aina keksittävä jonkinlainen viivytys siksi aikaa kun sivu kerkiää valmistua kokonaan.

Window.onload taitaa riittää siihen. https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload

Anonyymi kirjoitti:

Window.onload taitaa riittää siihen. https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload

document.onload() ja/tai window.onload() tapahtuma käynnistyy kun jotain verkko-osoitetta tavoitellaan, se ei kerro koska latautuminen on tapahtunut kokonaan.

Anonyymi kirjoitti:

document.onload() ja/tai window.onload() tapahtuma käynnistyy kun jotain verkko-osoitetta tavoitellaan, se ei kerro koska latautuminen on tapahtunut kokonaan.

Väärin. Ks. linkki.

Anonyymi kirjoitti:

document.onload() ja/tai window.onload() tapahtuma käynnistyy kun jotain verkko-osoitetta tavoitellaan, se ei kerro koska latautuminen on tapahtunut kokonaan.

window.onload() tarkoittaa että ruudullinen renderöitävää tavaraa on ladattu ja se voidaan näyttää.

Anonyymi kirjoitti:

Väärin. Ks. linkki.

Katsoinhan minä, ja hiukan testailinkin suurilla taustakuvilla, no nyt siinä kävi niin että tuota taidat olla oikeassa. Tässä jossain vaiheessa oli tarkoitus luoda jonkinlainen selain testi, johon sisältyy kahden selaimen yhtäaikainen verkkosivujen läpi käynti. Jossa kumpikin latailee sivuja, odottaa sen valmistumista, sulkee sivun ja hakee seuraavan sivun ja niin edelleen. Kiinnosti kumpi jää toisen jalkoihin, kun pistetään koneellista käskyttämistä mukaan kuvioihin, aikaa mitaten. Se projekti unohtui, mutta silloin kai sain päähäni ettei tuo;

window.onload = (event) => {};

olisi se jonka antamaan aikaan voisi pohjata kokonaisaikaa sivujen latauksista. Muistaakseni selaimien cache eli vielä vaikka window.onload sanoikin sivun valmistuneen. En muista mihinkä se projekti unohtui, ehkä kiinnostuin jostakin muusta enemmän. Vieläkin kalvaa epäilys miten asia on, vaikka noinkin luotettavalta sivulta asia vahvistui.