javascript - 如何防止用户中断当前正在运行的事件？

Question

所以我有一个函数，可以在每次单击导航链接时更改标题的背景颜色。我在该函数中有一个 setTimeout 函数，可以在将其更改回背景图像之前将该颜色保留 2 秒。我遇到的错误是，我可以不断点击导航按钮并不断更改颜色，这会扰乱时间。重要的是，该颜色在变回图像之前保持不变 2 秒。然后，在超时结束后，用户可以再次更改颜色。我尝试使用 bool 值来检查是否已经有一种颜色，但我无法让它工作。

const navLinks = document.querySelectorAll('.nav-links .link');
const linksArray = Array.from(document.querySelectorAll('.links div'));
const header = document.querySelector('header');
const form = document.querySelector('form');
const hamMenu = document.querySelector('.ham-menu');

for (var i = 0; i < navLinks.length; i++) {
	navLinks[i].addEventListener('click', changeColor);
}

for (var i = 0; i < linksArray.length; i++) {
	linksArray[i].addEventListener('click', shuffle);
}

function changeColor() {
	let hexArray = [0, 1, 2, 3, 4, 5, 6, 'A', 'B', 'C', 'D', 'E', 'F'];
	let hexColor = '#';

	for(let i = 0; i < 6; i++) {
		let random = Math.floor(Math.random()*hexArray.length);
		hexColor += hexArray[random];
	}

	if(!hasColor) {
		header.style.backgroundImage = 'none';
		header.style.backgroundColor = hexColor;
	}

	setTimeout(function() {
		header.style.backgroundImage = 'url(img/canada.jpeg)';
	}, 2000);
}

function shuffle() { //  Fisher-Yates shuffle algorithm
  for (let i = linksArray.length - 1; i > 0; i--) {
    let j = Math.floor(Math.random() * (i + 1)); 
    [linksArray[i].innerHTML, linksArray[j].innerHTML] = [linksArray[j].innerHTML, linksArray[i].innerHTML]; 
  }
}

form.addEventListener('submit', (e) => {
	e.preventDefault();
	const name = document.querySelector('.name').value;
	const address = document.querySelector('.address').value;
	const city = document.querySelector('.city').value;
	const dialog = document.querySelector('.dialog-wrap');
	const close = document.querySelector('.close');

	dialog.style.display = 'block';
	document.querySelector('.dialog-name').innerHTML = name;
	document.querySelector('.dialog-address').innerHTML = address;
	document.querySelector('.dialog-city').innerHTML = city;
	close.onclick = () => {
		dialog.style.display = 'none';
		document.querySelector("form").reset();
	}
	
})

hamMenu.addEventListener('click', () => {
	const nav = document.querySelector('nav');
	nav.classList.toggle('ham-open');
})

html, body {
	margin: 0;
	padding: 0;
}

body {
	font-family: 'Verdana';
	box-sizing: border-box;
	color: #63889b;
}

/** {
	outline: 1px solid red;
}*/

/*------NAV-----*/

nav {
	display: flex;
	justify-content: space-between;
	font-size: 1.8rem;
	padding: 25px 0;
	position: fixed;
	background-color: #fff;
	width: 100%;
	top: 0;
	left: 0;
	right: 0;
	z-index: 10;
	box-shadow: 0px 0px 70px rgb(99, 99, 99, 0.5);
}

.brand, .nav-links {
	display: flex;
	align-items: center;
}

.brand {
	margin-left: 6%;
	position: relative;
	z-index: 5;
}

.logo {
	max-width: 70px;
	max-height: 45px;
	margin-right: 25px;
}

.nav-links {
	position: relative;
	margin-right: 6%;
}

.nav-links .link {
	text-transform: uppercase;
	margin-right: 16px;
	cursor: pointer;
	transition: all .2s ease;
}

.nav-links .link:hover {
	color: #014263;
}

.ham-menu {
	display: none;
}

/*-----HEADER-----*/

header {
	background-image: url(img/canada.jpeg);
	background-position: center;
	background-size: cover;
	height: 80vh;
	margin-top: 92px;
}

.header-info {
	display: inline-block;
	color: #fff;
	font-size: 1.8rem;
	background-color: rgba(0,0,0,0.6);
	padding: 35px;
	margin-left: 10%;
	margin-top: 4%;
}

header p {
	margin: 0;
	padding: 0;
}

header p:first-child {
	margin-bottom: 25px;
}


/*-----MAIN-----*/

main {
	display: flex;
	background-color: #fff;
}

.col {
	flex-basis: 33.33%;
	padding: 50px 0 40px 0;
}

.col p {
	width: 65%;
	font-size: 1.25rem;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

.col img {
	display: block;
	margin: 0 auto;
}

.col-3 img {
	width: 280px;
	height: 155px;
}

.col-3 img, .col-3 h3, .col-3 p {
	position: relative;
	top: -8px;
}

.col-2 img, .col-2 h3, .col-2 p {
	position: relative;
	top: 30px;
}

.col-1 {
	margin-left: 7%;
}

.col-3 {
	margin-right: 7%;
}

h3 {
	text-align: center;
}

/*------FOOTER-----*/

footer {
	font-family: 'Helvetica';
	background-color: #63889b;
	display: flex;
	justify-content: space-between;
	color: #fff;
	padding: 30px 100px 30px 100px;
}

.internal-links h4 {
	text-decoration: underline;
	font-size: 1.5rem;
	text-align: center;
	margin-top: 0;
	margin-bottom: 8px;
	color: #fff;
}

.links div {
	font-size: 1.2rem;
	margin:2px 0;
	cursor: pointer;
	display: flex;
	flex-direction: column;
}


.form-wrap {
	display: flex;
	align-items: flex-end;
	flex-basis: 50%;
}

form {
	display: flex;
	flex-direction: column;
	width: 100%;
}

input {
	border: none;
	outline: none;
	font-size: 1.6rem;
}

label {
	font-size: 1.3rem;
	padding: 3px 0;
}

button {
	margin-top: 20px;
	border: 1px solid #fff;
	width: 50%;
	font-size: 1.3rem;
	background-color: #4678c9;
	align-self: flex-end;
	color: #fff;
	padding: 4px 30px;
}

.dialog-wrap {
	background-color: rgba(0,0,0,0.7);
	position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 1000;
    display: none;
}

dialog {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 500px;
	border: none;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

dialog div {
	font-size: 1.4rem;
	color: #fff;
	margin: 10px 0;
	outline: 1px solid #63889b;
}

dialog div:first-child {
	margin-top: 0px;
}

dialog .label {
	background-color: #63889b;
	padding: 7px;
	display: inline-block;
	width: 30%;
	margin: 0;
	text-align: center;
}

dialog .info {
	display: inline-block;
	padding-left: 5px;
	color: #000;
}

dialog button {
	border: none;
	width: 100%;
	margin: auto;
	padding: 7px;
	position: relative;
	top: 10px;
}

dialog button:hover {
	cursor: pointer;
	transition: all .3s ease;
	background-color: #0675ad;
}

dialog div:last-child {
	outline: none;
}

@media screen and (max-width: 1600px) {

	/*-----HEADER-----*/

	.header-info {
	font-size: 1.4rem;
	width: 392px;
	margin-left: 7%;
	}
}

@media screen and (max-width: 1400px) {

	/*-----HEADER-----*/

	header {
		height: 70vh;
	}

	/*-----MAIN-----*/

	.col p, .links {
		font-size: 1.1rem;
	}
}

@media screen and (max-width: 1200px) {

	/*-----NAV-----*/

	nav {
		font-size: 1.5rem;
	}

	.brand {
	    margin-left: 3%;
	}

	.nav-links {
	    margin-right: 3%;
	}

	/*-----HEADER-----*/

	.header-info {
		font-size: 1.3rem;
		width: 363px;
	}

	/*-----MAIN-----*/

	.col-1 img {
		width: 270px;
		height: 132px;
	}

	.col-2 img {
		width: 280px;
		height: 107px;
	}

	.col-3 img {
		width: 250px;
		height: 140px;
	}

	.col p, .links div, label {
		font-size: 1rem;
	}
}

@media screen and (max-width: 1000px) {

	/*-----MAIN-----*/

	.col p {
		width: 85%;
	}

	.col-1 img {
		width: 230px;
    	height: 112px; 
	}

	.col-2 img {
		width: 190px;
   		height: 82px;
	}

	.col-3 img {
		width: 210px;
    	height: 120px;
	}

	/*-----FOOTER-----*/

	button {
		font-size: 1.1rem;
	}

	dialog div {
    	font-size: 1.2rem;
	}
}

@media screen and (max-width: 900px) {

	/*-----NAV-----*/

	nav {
	    font-size: 1.4rem;
	}

	/*-----HEADER-----*/

	.header-info {
		font-size: 1.1rem;
		padding: 25px;
		width: 308px
	}


	header {
		height: 60vh;
	}
}

@media screen and (max-width: 850px) {

	/*-----FOOTER-----*/

    input {
	    font-size: 1.3rem;
	}

	footer {
		padding: 30px 70px 30px 70px;
	}
}

@media screen and (max-width: 800px) {

	/*-----MAIN-----*/

	main {
		padding: 0 10px;
	}

	.col-1 img {
	    width: 190px;
	    height: 92px;
	}

	.col-3 img {
	    width: 170px;
	    height: 100px;
	}

	.col-2 {
		padding-top: 30px;
	}

	.col {
		    margin: 0 10px;
	}
	
	.col p {
		width: 100%;
	}

	/*-----FOOTER-----*/

	footer {
		margin-top: -20px;
	}

	button {
		width: 100%;
	}
}

@media screen and (max-width: 765px) {

	/*-----FOOTER-----*/

	.col p, .links, label {
	    font-size: 0.9rem;
	}

	dialog {
		width: 400px;
	}
}

@media screen and (max-width: 728px) {

	/*-----NAV-----*/

	nav {
    	font-size: 1.2rem;
	}

	/*-----FOOTER-----*/

	.internal-links h4 {
	    font-size: 1.3rem; 
	}
}

@media screen and (max-width: 650px) {

	/*-----MAIN-----*/

	.col-1 img {
	    width: 160px;
	    height: 80px;
	}

	.col-2 img {
	    width: 170px;
	    height: 70px;
	}

	.col-3 img {
	    width: 140px;
	    height: 87px;
	}
}

@media screen and (max-width: 600px) {

	/*-----HEADER-----*/

    .comp-name {
    	position: relative;
    	right: 15px;
    }

    .nav-links .link {
    	margin-right: 0;
    	margin-left: 16px;
    }

	/*-----MAIN-----*/

	main {
		flex-direction: column;
	}

	.col-1 img {
	    width: 230px;
	    height: 112px;
	}

	.col-2 img, .col-2 h3, .col-2 p {
	    position: static;
	}

	.col-2 img {
	    width: 280px;
	    height: 119px;
	}

	.col-3 img {
	    width: 210px;
	    height: 120px;
	}

	.col {
		padding: 30px 0 20px 0;
	}

	.col p {
	    width: 90%;
	}

	/*------FOOTER-----*/

	button {
    	font-size: 1rem;
    }

	footer {
		margin-top: 0;
	}
}

@media screen and (max-width: 550px) {

	/*------NAV-----*/

	nav {
		padding: 15px 0;
	}

	.logo {
		max-width: 60px;
	}

	.ham-menu {
		display: flex;
		flex-direction: column;
		margin-right: 3%;
		cursor: pointer;
	}

	.nav-links {
		display: none;
	}

	.b1, .b2, .b3 {
		width: 45px;
		height: 5px;
		margin: auto;
		background-color: #4678c9;
		position: relative;
		transition: all .2s ease;
	}

	.ham-open .nav-links {
		display: flex;
		position: fixed;
	    left: 0;
	    right: 0;
	    top: 0;
	    bottom: 0;
	    flex-direction: column;
	    background-color: rgba(0,0,0,0.5);
	    margin: 0;
	    padding: 100px 0;
	}

	.ham-open .nav-links .link {
		font-size: 2.2rem;
		margin: auto;
		color: #fff;
	}

	.ham-open .comp-name {
		color: #fff;
	}

	.ham-open .b1 {
		background-color: #fff;
		transform: rotate(45deg) translate(8px, 8px);
	}

	.ham-open .b2 {
	    opacity: 0;
	}

	.ham-open .b3 {
		background-color: #fff;
		transform: rotate(-45deg) translate(9px, -9px);;
	}

	/*-----HEADER-----*/

	header {
		margin-top: 66px;
	}

	.header-info {
		display: block;
		position: relative;
		top: 40px;
		margin-right: auto;
		margin-left: auto;
	}

	/*-----FOOTER-----*/

	footer {
	    padding: 30px 40px 30px; 
	}

@media screen and (max-width: 500px) {

	/*-----FOOTER-----*/

	.internal-links h4 {
	    font-size: 1.1rem;
	}

	.links div, label {
	    font-size: 15px;
	}

	button {
	    margin-top: 8px;
	}

	footer {
	    padding: 20px 30px 20px;
	}

	dialog {
	    width: 340px;
	}
}

@media screen and (max-width: 450px) {

	/*-----FOOTER-----*/

	footer {
		flex-direction: column;
	}

	.internal-links {
		margin-bottom: 30px;
	}

	.links {
		text-align: center;
	}
}

@media screen and (max-width: 400px) {
	
	/*-----HEADER-----*/

	.header-info {
		font-size: 15px;
		padding: 15px;
		width: 262px;
	}
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Chapman Automotive Skills Assessment</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<nav>
		<div class="brand">
		<img src="img/Logo.png" alt="logo" class="logo">
		<div class="comp-name">CHAPMAN</div>
		</div>

		<div class="nav-links">
			<div class="link">Home</div>
			<div class="link">Sales</div>
			<div class="link">Blog</div>
			<div class="link">Login</div>
		</div>

		<div class="ham-menu">
			<div class="b1"></div>
			<div class="b2"></div>
			<div class="b3"></div>
		</div>
	</nav>
	<header>
		<div class="header-info">
			<p>We are a company that does stuff.</p>
			<p>Car and web stuff.</p>
		</div>
	</header>
	<main>
		<div class="col col-1">
			<img src="img/car1.jpg" alt="car1">

			<h3>Some Header</h3>

			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo tempore quia enim quod, perferendis illum quae id, natus dolores temporibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati, rem. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
		</div>

		<div class="col col-2">
			<img src="img/car2.jpg" alt="car2">

			<h3>More Stuff</h3>

			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo tempore quia enim quod, perferendis illum quae id, natus dolores temporibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, dolor. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
		</div>

		<div class="col col-3">
			<img src="img/car3.jpg" alt="car3">

			<h3>Last Column</h3>

			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo tempore quia enim quod, perferendis illum quae id, natus dolores temporibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, ipsa. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
		</div>
	</main>
	<footer id="footer">
		<div class="internal-links">
			<h4>Internal Links</h4>

			<div class="links">
				<div>Page One</div>
				<div>Another Page</div>
				<div>Sales Page</div>
				<div>Page Three</div>
				<div>Keep Going</div>
				<div>Last One</div>
				<div>Just Kidding</div>
			</div>
		</div>

		<div class="form-wrap">
			<form>
				<label for="Name">Name</label>
				<input type="text" class="name" required>
				<label for="Name">Address</label>
				<input type="text" class="address" required>
				<label for="Name">City</label>
				<input type="text" class="city" required>

				<button type="submit" id="submit">Submit Form</button>
			</form>

			<div class="dialog-wrap">
				<dialog>
					<div><span class="label">Name:</span><span class="dialog-name info"></span></div>
					<div><span class="label">Address:</span><span class="dialog-address info"></span></div>
					<div><span class="label">City:</span><span class="dialog-city info"></span></div>
					<div><button class="close">Close</button></div>
				</dialog>
			</div>
	</footer>
	<script src="script.js"></script>
</body>
</html>

Answer 1

这里有一个 GOB 代码。
怎么样:
1)有一个全局变量

var switch1 = 0;    

2)导航代码中的第一条语句:

if (switch1 == 1) return; 
switch1 = 1;

3) 你的 setTimeout 是:

setTimeout(function() {
    header.style.backgroundImage = 'url(img/canada.jpeg)';
    switch1 = 0;
  }, 2000);

这是一个如此简单的方法，我几乎羞于发布它。