KOMPOOS.NL

pause javascript

home » manuals » javascript » pause-javascript.html

sitemap


voorbeeld javascript pauze procedure - cross browser


uitleg javascript pause functie

Standaard kent javascript geen functie om een script te pauzeren. Nu kan je makkelijk javascript in een loop "zetten", maar dat is heel erg onverstandig. Ten eerste vreet zo'n actie CPU-tijd, en ten tweede is vaak de gehele pagina "bevroren" totdat de loop eens eindelijk klaar is met de "pauze"(?!).

Het is verstandiger om een procedure te gebruiken die de pagina nooit bevriest, en die geen extra beslag op de CPU legt. Het javascript wat hieronder staat is, zo duidelijk als mogelijk, gedocumenteerd in de code. Wil je heel erg snel aan de slag zonder te begrijpen hoe het script te werk gaat, kan je de variabele de_gewenste_pauze_tijd een waarde in milliseconden geven en op de plaats van de twee document.getElementById's in de functie code_die_na_de_pauze_uitgevoerd_wordt() code (die uitgevoerd moet worden) plaatsen, of een andere fuctie (vanaf die plaats) aanroepen.

De pauze-tijd staat nu ingesteld (op deze pagina) op 4 seconden. Maar met hetzelfde gemak kan je daar 4 uur van maken (14400000㎳). Ik neem aan dat je begrijpt dat alle overbodige code uit het onderstaande script gehaald kan worden. Zolang je het "frame" maar intact laat kan je die op alle pagina's van jou gebruiken waar je vertraagd code wilt uitvoeren, of met een vertraging (regelmatig) functies wilt laten uitvoeren.

het javascript voor de javascript pauze functie


<script> 
/*global document: false */
/*global setTimeout: false */
/*global window: false */
/*global setInterval: false */
/*global clearInterval: false */
/*global clearTimeout: false */
/*global setTimeout: false */
/*global wachten: true */
var de_gewenste_pauze_tijd = 4000,
    snelheid_hoofdlus_pauze_procedure = 3000,
    herstart_snelheid_hoofdlus_pauze_procedure = snelheid_hoofdlus_pauze_procedure,
    block_check = 0,
    interval_timer, pauze_timer_twee,
    pauze_timer_een,
    odd_even = 1;
function hoofdlus_pauze_procedure() {
    document.getElementById("javascript_pause_execute").innerHTML = "";
        if(odd_even === 111){odd_even = 1;}     
    odd_even++;
    if (odd_even % 2) {
        document.getElementById("javascript_pauze_demo").innerHTML = "<span style='color:#0bb;'>&#9619;</span> javascript pauze demo 2 - Pagina-Status : 4 seconden wachten";
    } else {
        document.getElementById("javascript_pauze_demo").innerHTML = "<span style='color:#0b0;'>&#9619;</span> javascript pauze demo 1 - Pagina-Status : (re)start pauze procedure";
    }
    if (odd_even % 2) {
        snelheid_hoofdlus_pauze_procedure = (de_gewenste_pauze_tijd + 1000);
        if (block_check === 0) {
            wachten(de_gewenste_pauze_tijd);
        }
    }
    clearTimeout(pauze_timer_een);
    pauze_timer_een = setTimeout(function () {
        hoofdlus_pauze_procedure();
    }, snelheid_hoofdlus_pauze_procedure);
}
function code_die_na_de_pauze_uitgevoerd_wordt() {
    block_check = 0;
    clearInterval(interval_timer);
    clearTimeout(pauze_timer_twee);

    // HIER KAN JE CODE PLAATSEN OF EEN FUNCTIE AANROEPEN

    document.getElementById("javascript_pauze_demo").innerHTML = "<span style='color:#f00;'>&#9619;</span> javascript pauze demo 3 - Pagina-Status : voer javascript routine uit";
    document.getElementById("javascript_pause_execute").innerHTML = "<span style='color:#f00;'>&#9619;</span> javascript routine";
    pauze_timer_twee = setTimeout(function () {
        hoofdlus_pauze_procedure();
    }, herstart_snelheid_hoofdlus_pauze_procedure);
    return false;
}
function wachten(milliseconden_pauze) {
    if (block_check === 0) {
        block_check = 1;
        interval_timer = setInterval(function () {
            code_die_na_de_pauze_uitgevoerd_wordt();
        }, milliseconden_pauze);
    }
    return true;
}
function start_pauze_procedure() {
    setTimeout(function () {
        hoofdlus_pauze_procedure();
    }, 200);
}
window.onload = start_pauze_procedure;
</script> 
Gebruik voor alle voorbeelden op de http://kompoos.nl een valide html5 pagina.