Ankündigung

Einklappen
Keine Ankündigung bisher.

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

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


  • #2
    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.

    Kommentar


    • #3
      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>

      Kommentar


      • #4
        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.

        Kommentar

        Lädt...
        X