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

Question

因此，我有一个函数，每次单击导航链接时，该函数都会更改标题的背景颜色。我在该函数中有一个setTimeout函数，可以将该颜色保留2秒钟，然后再将其更改回背景图像。我的错误是，我可以一直单击导航按钮并不断更改颜色，这会弄乱时间。在变回图像之前，颜色必须保持2秒钟不变，这一点很重要。然后，在超时运行后，用户可以再次更改颜色。我尝试使用布林（boolen）检查是否已经有一种颜色，但是我无法使其正常工作。

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

这是一种简单的方法，我几乎不敢发布。