Ankündigung

Einklappen
Keine Ankündigung bisher.

DIV nicht überlappen, falls mehrere Links gedrückt werden

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • DIV nicht überlappen, falls mehrere Links gedrückt werden

    Code:
    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
    </head>
    <body>
        <div id="content"></div>
        <script>
            function load(x) {
                var absolute = setInterval(function() {$("#content").load(x+'.php')}, 1000);
                }
        </script>
    
            <button onclick=load('bla')>Load that!</button>
            <button onclick=load('world')>Load World!</button>
    </content>
    </body>
    </html>
    Es funktioniert soweit mit den setIntervals alles schön, mein Problem ist jetzt nur, wenn ich einmal jeweils beide Buttons drücke, überlappt er mir diese (also, ich sehe einmal kurz die 1 Page, und auch die andere)

    Habe bereits eine ganze Weile probiert, das Problem mittels clearInterval zu lösen, will aber irgendwie nicht hinhauen....

    Danke im Voraus

  • hellbringer
    antwortet
    Wie gesagt, JavaScript-Code nicht in den HTML-Code schreiben.
    Code:
    jQuery(function ($) {
        var interval;
    
        $('button').click(function () {
            var $button = $(this);
    
            if (interval) {
                clearInterval(interval);
            }
    
            interval = setInterval(function () {
                $('#conten').load($button.attr('name') + '.php');
            }, 1000);
        });
    });
    Und die Buttons:
    HTML-Code:
    <button name="bla">Load that!</button>
    <button name="world">Load World!</button>
    ungetestet

    Wobei das Rumgebastel mit Intervallen zu Race-Conditions führen kann. Ich würde für sowas RxJS verwenden.

    Einen Kommentar schreiben:


  • Kampfbaer
    antwortet
    Und wo sollte ich diesen löschen?

    folgender Code bringt keine Änderungen:

    Code:
    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
    </head>
    <body>
        <div id="content"></div>
        <script>
            function load(x) {
                clearInterval(absolute);
                var absolute = setInterval(function() {$("#content").load(x+'.php')}, 1000);
                }
        </script>
    
            <button onclick=load('bla')>Load that!</button>
            <button onclick=load('world')>Load World!</button>
    </content>
    </body>
    </html>

    Einen Kommentar schreiben:


  • hellbringer
    antwortet
    Du solltest JavaScript- und HTML-Code nicht vermischen. Das wird sonst schnell unübersichtlich. Außerdem müllst du dir den globalen Namensraum zu.

    Zu deinem Problem: Wenn du einen neuen Interval setzt musst du den alten mit clearInterval() löschen.

    Einen Kommentar schreiben:

Lädt...
X