Weiternutzung Funktion auf Fenster Resize/Last

Question

ich den folgenden Code haben, die Fenster auf Last prüfen/Größe und variable MOBILE_WIDTH Accroding es läuft (oder nicht) die Funktion. Es folgt jedoch das offensichtliche Problem, dass beim Neustart derselben Funktion jede Initialisierung im Inneren erneut ausgeführt wird, wie bei .forEach-Methode. Wenn wir also nach der Größenänderung auf dieselbe Überschrift klicken, zeigt das Konsolenprotokoll an, dass wir mehrfach darauf geklickt haben. Wie vermeide ich das? Und die codepen here.

let window_handlers = ['load', 'resize']; 
 
let h1 = document.querySelectorAll('h1'); 
 
const MOBILE_WIDTH = 600; 
 

 
window_handlers.map(handler => { 
 
\t window.addEventListener(handler,()=>{ 
 
\t \t console.log(handler) 
 
\t \t if(window.innerWidth <= MOBILE_WIDTH) { \t \t \t 
 
\t \t \t test(true); 
 
\t \t } else { 
 
\t \t \t test(false); 
 
\t \t } 
 
\t }) 
 
}) 
 
let test = (statement) => { 
 
\t if(statement) { 
 
\t \t Array.from(h1).forEach(element => { 
 
\t \t \t element.addEventListener('click',()=> { 
 
\t \t \t \t console.log('clicked') 
 
\t \t \t }) 
 
\t \t }) 
 
\t } 
 
}

* { 
 
    box-sizing: border-box; 
 
} 
 

 
html, body { 
 
    height: 100%; 
 
} 
 

 
body { 
 
    font-family: "Roboto", sans-serif; 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-box-align: center; 
 
     -ms-flex-align: center; 
 
      align-items: center; 
 
    -webkit-box-pack: center; 
 
     -ms-flex-pack: center; 
 
      justify-content: center; 
 
    background-color: #FE5F55; 
 
} 
 

 
h1 { 
 
    font-size: 32px; 
 
    font-weight: bold; 
 
    cursor: pointer; 
 
    color: white; 
 
    margin-bottom: 10px; 
 
    -webkit-transition: .3s; 
 
    transition: .3s; 
 
    text-shadow: 2px 2px rgba(255, 255, 255, 0.4), 4px 4px rgba(0, 0, 0, 0.1); 
 
} 
 
h1:hover { 
 
    text-shadow: 1px 1px rgba(255, 255, 255, 0.4), 2px 2px rgba(0, 0, 0, 0.1); 
 
}

<div class="headers"> 
 
\t <h1>Header 1</h1> 
 
\t <h1>Header 2</h1> 
 
</div>

Answer 1

Was geschieht, ist, dass Sie nicht Ereignis-Listener zu entfernen, bevor sie wieder in dem Hinzufügen.

Verwenden removeEventListener das Click-Ereignis in der ersten Zeile der Resize-Methode zu entfernen .

let window_handlers = ['load', 'resize']; 
let h1 = document.querySelectorAll('h1'); 
const MOBILE_WIDTH = 600; 

window_handlers.map(handler => { 
    window.addEventListener(handler,()=>{ 
     console.log(handler) 
     Array.from(h1).forEach(element => { 
      element.removeEventListener('click', click); 
     }) 

     if(window.innerWidth <= MOBILE_WIDTH) {   
      test(true); 
     } else { 
      test(false); 
     } 
    }) 
}) 
let test = (statement) => { 
    if(statement) { 
     Array.from(h1).forEach(element => { 
      element.addEventListener('click', click); 
     }) 
    } 
} 
function click() { console.log('clicked'); } 

Ich habe dies nicht getestet, aber Sie sollten das Konzept verstehen.