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

【问题标题】：How can I keep the user from interrupting the event that's currently running?如何防止用户中断当前正在运行的事件？
【发布时间】：2019-06-08 23:40:33
【问题描述】：

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

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>

【问题讨论】：

900 行代码，您是否称其为最小的、可重现的问题示例？ stackoverflow.com/help/how-to-ask

标签： javascript

【解决方案1】：

这里有一段代码。
怎么样：
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);

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

【讨论】：