Question

我有以下代码，检查加载/调整大小的窗口并将变量MOBILE_WIDTH转换为运行（或不运行）函数。但它遵循一个明显的问题，即当重新启动相同的函数时，它重新运行内部的每个初始化，如.forEach方法，因此当我们在调整控制台日志大小后单击相同的标题时，我们会多次单击它。怎么避免这个？还有codepen here。

＆＃13;

let window_handlers = ['load', 'resize'];
let h1 = document.querySelectorAll('h1');
const MOBILE_WIDTH = 600;

window_handlers.map(handler => {
	window.addEventListener(handler, ()=>{
		console.log(handler)
		if(window.innerWidth <= MOBILE_WIDTH) {			
			test(true);
		} else {
			test(false);
		}
	})
})
let test = (statement) => {
	if(statement) {
		Array.from(h1).forEach(element => {
			element.addEventListener('click', ()=> {
				console.log('clicked')
			})
		})
	}
}

＆＃13;

* {
  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);
}

＆＃13;

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

＆＃13;

Answer 1

发生的事情是，在重新添加事件监听器之前，你不会删除它们。

使用removeEventListener删除resize方法第一行中的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'); }

我没有测试过这个，但你应该理解这个概念。

在窗口调整大小/加载时重用功能

1 个答案: