JavaScript - Wiederholen Sie nur JavaScript-Code

Question

So habe ich Code, der meine Funktion für immer wiederholt, obwohl, wenn ich das mache, wiederholt sich der Rest meiner Website auch. Also, wenn ich versuche, Textfeld einzugeben, lässt es mich nicht. Und wenn ich über die Dinge schwebe, blinken sie. Wie kann ich das beheben?

Code:

window.onload = function() { 
    setInterval(function() { 
    function replaceTextByImage(pattern, src) { 
     document.body.innerHTML = document.body.innerHTML.replace(new RegExp(pattern, 'g'), '<span style="background-size: 100% 100%; background-image: url(\'' + src + '\');">&nbsp&nbsp&nbsp&nbsp</span>'); 
    } 

    console.log("Repeating Emoji Convert"); 

    // Smile 
    replaceTextByImage(':\\)', 'https://csf30816.github.io/svg-emoji/emojis/smile.svg'); 
    replaceTextByImage(':smile:', 'https://csf30816.github.io/svg-emoji/emojis/smile.svg'); 
    replaceTextByImage('', 'https://csf30816.github.io/svg-emoji/emojis/smile.svg'); 

    // Tongue 
    replaceTextByImage(':P', 'https://csf30816.github.io/svg-emoji/emojis/tongue.svg'); 
    replaceTextByImage(':tongue:', 'https://csf30816.github.io/svg-emoji/emojis/tongue.svg'); 
    replaceTextByImage('', 'https://csf30816.github.io/svg-emoji/emojis/tongue.svg'); 

    // Big Smile 
    replaceTextByImage(':D', 'https://csf30816.github.io/svg-emoji/emojis/big-smile.svg'); 
    replaceTextByImage(':big-smile:', 'https://csf30816.github.io/svg-emoji/emojis/big-smile.svg'); 
    replaceTextByImage('', 'https://csf30816.github.io/svg-emoji/emojis/big-smile.svg'); 

    // Frown ☹ 
    replaceTextByImage(':\\(', 'https://csf30816.github.io/svg-emoji/emojis/frown.svg'); 
    replaceTextByImage(':frown:', 'https://csf30816.github.io/svg-emoji/emojis/frown.svg'); 
    replaceTextByImage('☹', 'https://csf30816.github.io/svg-emoji/emojis/frown.svg'); 
    replaceTextByImage('', 'https://csf30816.github.io/svg-emoji/emojis/frown.svg'); 

    // Wink 
    replaceTextByImage(';\\)', 'https://csf30816.github.io/svg-emoji/emojis/wink.svg'); 
    replaceTextByImage(':wink:', 'https://csf30816.github.io/svg-emoji/emojis/wink.svg'); 
    replaceTextByImage('', 'https://csf30816.github.io/svg-emoji/emojis/wink.svg'); 

    // Dizzy 
    replaceTextByImage('xO', 'https://csf30816.github.io/svg-emoji/emojis/dead.svg'); 
    replaceTextByImage(':dizzy:', 'https://csf30816.github.io/svg-emoji/emojis/dead.svg'); 
    replaceTextByImage(':dead:', 'https://csf30816.github.io/svg-emoji/emojis/dead.svg'); 
    replaceTextByImage('', 'https://csf30816.github.io/svg-emoji/emojis/dead.svg'); 

    // Cry 
    replaceTextByImage(':crying:', 'https://csf30816.github.io/svg-emoji/emojis/cry.svg'); 
    replaceTextByImage(':cry:', 'https://csf30816.github.io/svg-emoji/emojis/cry.svg'); 
    replaceTextByImage('', 'https://csf30816.github.io/svg-emoji/emojis/cry.svg'); 
    replaceTextByImage('', 'https://csf30816.github.io/svg-emoji/emojis/cry.svg'); 

    // Big Frown 
    replaceTextByImage('D:', 'https://csf30816.github.io/svg-emoji/emojis/big-frown.svg'); 
    replaceTextByImage(':big-frown:', 'https://csf30816.github.io/svg-emoji/emojis/big-frown.svg'); 
    replaceTextByImage(':gasp:', 'https://csf30816.github.io/svg-emoji/emojis/big-frown.svg'); 
    replaceTextByImage('', 'https://csf30816.github.io/svg-emoji/emojis/big-frown.svg'); 

    // Heart Eyes 
    replaceTextByImage(':heart-eyes:', 'https://csf30816.github.io/svg-emoji/emojis/heart-eyes.svg'); 
    replaceTextByImage('', 'https://csf30816.github.io/svg-emoji/emojis/heart-eyes.svg'); 

    // Neutral 
    replaceTextByImage(':neutral:', 'https://csf30816.github.io/svg-emoji/emojis/neutral.svg'); 
    replaceTextByImage(':\\|', 'https://csf30816.github.io/svg-emoji/emojis/neutral.svg'); 
    replaceTextByImage(':plain:', 'https://csf30816.github.io/svg-emoji/emojis/neutral.svg'); 
    replaceTextByImage('', 'https://csf30816.github.io/svg-emoji/emojis/neutral.svg'); 

    // Raging 
    replaceTextByImage(':raging:', 'https://csf30816.github.io/svg-emoji/emojis/raging.svg'); 
    replaceTextByImage(':angry-red:', 'https://csf30816.github.io/svg-emoji/emojis/raging.svg'); 
    replaceTextByImage('', 'https://csf30816.github.io/svg-emoji/emojis/raging.svg'); 

    // Mad 
    replaceTextByImage(':angry:', 'https://csf30816.github.io/svg-emoji/emojis/mad.svg'); 
    replaceTextByImage(':mad:', 'https://csf30816.github.io/svg-emoji/emojis/mad.svg'); 
    replaceTextByImage('', 'https://csf30816.github.io/svg-emoji/emojis/mad.svg'); 

    // Teeth 
    replaceTextByImage(':teeth:', 'https://csf30816.github.io/svg-emoji/emojis/teeth.svg'); 
    replaceTextByImage(':wide-smile:', 'https://csf30816.github.io/svg-emoji/emojis/teeth.svg'); 
    replaceTextByImage('', 'https://csf30816.github.io/svg-emoji/emojis/teeth.svg'); 

    // Thumbs Up 
    replaceTextByImage(':thumbs-up:', 'https://csf30816.github.io/svg-emoji/emojis/thumbs-up.svg'); 
    replaceTextByImage(':up:', 'https://csf30816.github.io/svg-emoji/emojis/thumbs-up.svg'); 
    replaceTextByImage('', 'https://csf30816.github.io/svg-emoji/emojis/thumbs-up.svg'); 

    // Thumbs Down 
    replaceTextByImage(':thumbs-down:', 'https://csf30816.github.io/svg-emoji/emojis/thumbs-down.svg'); 
    replaceTextByImage(':down:', 'https://csf30816.github.io/svg-emoji/emojis/thumbs-down.svg'); 
    replaceTextByImage('', 'https://csf30816.github.io/svg-emoji/emojis/thumbs-down.svg'); 
    }, 300); 
}; 

Answer 1

ein Intervall Lauf nachladen nicht das gesamte Dokument finden Sie in der PLUNK here. Dein Problem liegt woanders. Z.B.

<body> 
    <input type = "text" placeholder = "Type something" /> 
    <br /> 
    <div id="randomText">Random Text</div> 
    <script> 
     function repeatSomething() { 
     var rand = Math.random(); 
     var randDiv = document.getElementById('randomText'); 
     randDiv.innerHTML = rand; 
     } 
     setInterval(repeatSomething, 1000); 
    </script> 
    </body> 

Answer 2

Jetzt ersetzt Ihr setInterval den gesamten Dokumentkörper mehr als dreimal pro Sekunde. Dies ist, sagen wir, etwas problematisch aus Sicht der Leistung; Jedes Mal, wenn setInterval ausgeführt wird, muss der Browser die gesamte Webseite von Grund auf neu zeichnen. Es bedeutet auch, dass Sie nicht in ein Textfeld innerhalb der Seite eingeben können, da Sie dieses Textfeld dreimal pro Sekunde durch ein neues ersetzen.

Also tu das nicht.

Was sind Sie wirklich zu erreichen versuchen, ist:

Ich will es so, dass auf meiner Chat-Seite, wenn jemand mir eine Nachricht mit einem Emoji sendet sie an das Emoji-Bild aktualisiert

... statt den Code ständig über die gesamte Seite laufen zu lassen, führen Sie ihn nur über den Inhalt jeder neuen Nachricht aus und nur dann, wenn diese neue Nachricht eintrifft, bevor Sie diese neue Nachricht in das DOM einfügen. Es ist nicht notwendig, den Rest der Seite neu zu zeichnen, da Sie bereits nach den vorhandenen Nachrichten gesucht und sie ersetzt haben. Irgendwelche Auswechslungen, die durchgeführt werden müssen, wurden bereits durchgeführt.

Wie, genau, das zu tun hängt davon ab, wie Sie gerade neuen Nachrichtentext erhalten und es in das DOM einfügen, aber im Grunde ist der Fluss gerade jetzt "neue Nachricht erhalten und in das DOM als einfügen ist, unterdessen ständig suchen-und-ersetzen über das gesamte Dokument ". Es sollte stattdessen "neue Nachricht empfangen, den Inhalt der neuen Nachricht nach Bedarf suchen und ersetzen, die Ergebnisse in das DOM einfügen".

Letzte Frage

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

 Verwandte Themen

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.