Ankündigung

Einklappen
Keine Ankündigung bisher.

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

Einklappen

Neue Werbung 2019

Einklappen
X
Einklappen
  • Seite von 1
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge
Vorherige Weiter
  • #1

    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
    Stichworte: -
  • #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

        Vorherige Weiter
        Lädt...
        X