重新使用窗口調整大小/加載功能

Question

我有以下代碼，檢查加載/調整大小的窗口和accroding變量MOBILE_WIDTH它運行（或不）該函數。但是，它遵循一個明顯的問題，即重新啓動相同的函數時，它會重新執行每個初始化內容，例如.forEach方法，所以當我們在調整控制檯日誌的大小後單擊同一標題時，顯示我們多次單擊它。如何避免這種情況？ 和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

正在發生的事情是，你不加入他們回來之前刪除事件偵聽器。

使用removeEventListener在你的大小調整方法的第一行刪除click事件。

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'); } 

我還沒有測試過這個，但是你應該理解這個概念。