Unable to delay execution of funcRemove
I'm having an issue with delaying the execution of funcRemove
till after the alert
fires.
I tried using setTimeout
but then I keep getting an error stating that the remove
property doesn't exist. How do I accomplish delaying the execution of funcRemove
till after the alert
fires?
const listAddCard = document.querySelectorAll('.card');
const moveElem = document.querySelector('.moves');
let turnCheck = 0;
let cardChecker = '';
let prevCard = '';
let moves = 3;
let matchCheck = function(evtObj){
funcShow(evtObj);
console.log(turnCheck);
if(turnCheck===1){
setTimeout(function(){}, 1000);
if(evtObj.target.innerHTML===cardChecker){
evtObj.target.classList.add('match');
prevCard.classList.add('match');
}
else{
alert('No match');
}
funcRemove(prevCard, evtObj);
turnCheck = 0;
cardChecker = '';
prevCard = '';
moves++;
moveElem.innerHTML = moves;
return;
}
prevCard = evtObj.target;
cardChecker = evtObj.target.innerHTML;
turnCheck++;
}
let funcShow = function(e){
e.target.classList.add('open', 'show');
console.log('funcShow');
}
const cardDeck = document.querySelectorAll('.card');
for(var i=0;i<cardDeck.length;i++){
cardDeck[i].addEventListener('click', matchCheck);
}
let funcRemove = function (p1,p2){
setTimeout(function(){}, 1000);
p1.classList.remove('open', 'show');
p2.target.classList.remove('open', 'show');
}
javascript event-handling alert
add a comment |
I'm having an issue with delaying the execution of funcRemove
till after the alert
fires.
I tried using setTimeout
but then I keep getting an error stating that the remove
property doesn't exist. How do I accomplish delaying the execution of funcRemove
till after the alert
fires?
const listAddCard = document.querySelectorAll('.card');
const moveElem = document.querySelector('.moves');
let turnCheck = 0;
let cardChecker = '';
let prevCard = '';
let moves = 3;
let matchCheck = function(evtObj){
funcShow(evtObj);
console.log(turnCheck);
if(turnCheck===1){
setTimeout(function(){}, 1000);
if(evtObj.target.innerHTML===cardChecker){
evtObj.target.classList.add('match');
prevCard.classList.add('match');
}
else{
alert('No match');
}
funcRemove(prevCard, evtObj);
turnCheck = 0;
cardChecker = '';
prevCard = '';
moves++;
moveElem.innerHTML = moves;
return;
}
prevCard = evtObj.target;
cardChecker = evtObj.target.innerHTML;
turnCheck++;
}
let funcShow = function(e){
e.target.classList.add('open', 'show');
console.log('funcShow');
}
const cardDeck = document.querySelectorAll('.card');
for(var i=0;i<cardDeck.length;i++){
cardDeck[i].addEventListener('click', matchCheck);
}
let funcRemove = function (p1,p2){
setTimeout(function(){}, 1000);
p1.classList.remove('open', 'show');
p2.target.classList.remove('open', 'show');
}
javascript event-handling alert
add a comment |
I'm having an issue with delaying the execution of funcRemove
till after the alert
fires.
I tried using setTimeout
but then I keep getting an error stating that the remove
property doesn't exist. How do I accomplish delaying the execution of funcRemove
till after the alert
fires?
const listAddCard = document.querySelectorAll('.card');
const moveElem = document.querySelector('.moves');
let turnCheck = 0;
let cardChecker = '';
let prevCard = '';
let moves = 3;
let matchCheck = function(evtObj){
funcShow(evtObj);
console.log(turnCheck);
if(turnCheck===1){
setTimeout(function(){}, 1000);
if(evtObj.target.innerHTML===cardChecker){
evtObj.target.classList.add('match');
prevCard.classList.add('match');
}
else{
alert('No match');
}
funcRemove(prevCard, evtObj);
turnCheck = 0;
cardChecker = '';
prevCard = '';
moves++;
moveElem.innerHTML = moves;
return;
}
prevCard = evtObj.target;
cardChecker = evtObj.target.innerHTML;
turnCheck++;
}
let funcShow = function(e){
e.target.classList.add('open', 'show');
console.log('funcShow');
}
const cardDeck = document.querySelectorAll('.card');
for(var i=0;i<cardDeck.length;i++){
cardDeck[i].addEventListener('click', matchCheck);
}
let funcRemove = function (p1,p2){
setTimeout(function(){}, 1000);
p1.classList.remove('open', 'show');
p2.target.classList.remove('open', 'show');
}
javascript event-handling alert
I'm having an issue with delaying the execution of funcRemove
till after the alert
fires.
I tried using setTimeout
but then I keep getting an error stating that the remove
property doesn't exist. How do I accomplish delaying the execution of funcRemove
till after the alert
fires?
const listAddCard = document.querySelectorAll('.card');
const moveElem = document.querySelector('.moves');
let turnCheck = 0;
let cardChecker = '';
let prevCard = '';
let moves = 3;
let matchCheck = function(evtObj){
funcShow(evtObj);
console.log(turnCheck);
if(turnCheck===1){
setTimeout(function(){}, 1000);
if(evtObj.target.innerHTML===cardChecker){
evtObj.target.classList.add('match');
prevCard.classList.add('match');
}
else{
alert('No match');
}
funcRemove(prevCard, evtObj);
turnCheck = 0;
cardChecker = '';
prevCard = '';
moves++;
moveElem.innerHTML = moves;
return;
}
prevCard = evtObj.target;
cardChecker = evtObj.target.innerHTML;
turnCheck++;
}
let funcShow = function(e){
e.target.classList.add('open', 'show');
console.log('funcShow');
}
const cardDeck = document.querySelectorAll('.card');
for(var i=0;i<cardDeck.length;i++){
cardDeck[i].addEventListener('click', matchCheck);
}
let funcRemove = function (p1,p2){
setTimeout(function(){}, 1000);
p1.classList.remove('open', 'show');
p2.target.classList.remove('open', 'show');
}
javascript event-handling alert
javascript event-handling alert
asked Nov 20 '18 at 23:36
Aditya GortiAditya Gorti
287
287
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
setTimeout
is an asynchronous function which means that it is executed in parallel. You need to put the code that you want to run after the 1000ms delay inside of the function in setTimeout
. For example:
console.log("Print #1");
setTimeout(function() {
console.log("Print me after 1000ms");
}, 1000);
console.log("Print #2");
"Print 2"
will print right after "Print 1"
while the "Print me after 1000ms"
will be printed later.
Furthermore, you can't simply return inside of setTimeout
. Whatever you put inside of setTimeout
is part of a callback function: https://developer.mozilla.org/en-US/docs/Glossary/Callback_function.
To make use of callbacks and setTimeout
correctly in your case, here's what you want to do:
let funcRemove = function (p1,p2, callback){
p1.classList.remove('open', 'show');
p2.target.classList.remove('open', 'show');
setTimeout(callback, 1000);
}
In matchCheck
:
let matchCheck = function(evtObj){
funcShow(evtObj);
console.log(turnCheck);
if(turnCheck===1){
setTimeout(function(){}, 1000);
if(evtObj.target.innerHTML===cardChecker){
evtObj.target.classList.add('match');
prevCard.classList.add('match');
}
else{
alert('No match');
}
funcRemove(prevCard, evtObj, function() {
// this part is executed 1000ms later
turnCheck = 0;
cardChecker = '';
prevCard = '';
moves++;
moveElem.innerHTML = moves;
})
return;
}
prevCard = evtObj.target;
cardChecker = evtObj.target.innerHTML;
turnCheck++;
}
What I'm trying to delay is the execution of funcRemove itself, specifically 'p1.classList.remove('open', 'show'); p2.target.classList.remove('open', 'show');' I want these classes to be removed after the alert fires and the alert dialog box is closed. Does that make sense?
– Aditya Gorti
Nov 24 '18 at 3:00
alert
is synchronous. It will pause the rest of the code and wait until you press "ok" to execute the rest of your code. If that's what you need, you just need to movefuncRemove
inside theelse
statement so that it only runs after the alert.
– Kevin Bai
Nov 24 '18 at 13:44
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53403226%2funable-to-delay-execution-of-funcremove%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
setTimeout
is an asynchronous function which means that it is executed in parallel. You need to put the code that you want to run after the 1000ms delay inside of the function in setTimeout
. For example:
console.log("Print #1");
setTimeout(function() {
console.log("Print me after 1000ms");
}, 1000);
console.log("Print #2");
"Print 2"
will print right after "Print 1"
while the "Print me after 1000ms"
will be printed later.
Furthermore, you can't simply return inside of setTimeout
. Whatever you put inside of setTimeout
is part of a callback function: https://developer.mozilla.org/en-US/docs/Glossary/Callback_function.
To make use of callbacks and setTimeout
correctly in your case, here's what you want to do:
let funcRemove = function (p1,p2, callback){
p1.classList.remove('open', 'show');
p2.target.classList.remove('open', 'show');
setTimeout(callback, 1000);
}
In matchCheck
:
let matchCheck = function(evtObj){
funcShow(evtObj);
console.log(turnCheck);
if(turnCheck===1){
setTimeout(function(){}, 1000);
if(evtObj.target.innerHTML===cardChecker){
evtObj.target.classList.add('match');
prevCard.classList.add('match');
}
else{
alert('No match');
}
funcRemove(prevCard, evtObj, function() {
// this part is executed 1000ms later
turnCheck = 0;
cardChecker = '';
prevCard = '';
moves++;
moveElem.innerHTML = moves;
})
return;
}
prevCard = evtObj.target;
cardChecker = evtObj.target.innerHTML;
turnCheck++;
}
What I'm trying to delay is the execution of funcRemove itself, specifically 'p1.classList.remove('open', 'show'); p2.target.classList.remove('open', 'show');' I want these classes to be removed after the alert fires and the alert dialog box is closed. Does that make sense?
– Aditya Gorti
Nov 24 '18 at 3:00
alert
is synchronous. It will pause the rest of the code and wait until you press "ok" to execute the rest of your code. If that's what you need, you just need to movefuncRemove
inside theelse
statement so that it only runs after the alert.
– Kevin Bai
Nov 24 '18 at 13:44
add a comment |
setTimeout
is an asynchronous function which means that it is executed in parallel. You need to put the code that you want to run after the 1000ms delay inside of the function in setTimeout
. For example:
console.log("Print #1");
setTimeout(function() {
console.log("Print me after 1000ms");
}, 1000);
console.log("Print #2");
"Print 2"
will print right after "Print 1"
while the "Print me after 1000ms"
will be printed later.
Furthermore, you can't simply return inside of setTimeout
. Whatever you put inside of setTimeout
is part of a callback function: https://developer.mozilla.org/en-US/docs/Glossary/Callback_function.
To make use of callbacks and setTimeout
correctly in your case, here's what you want to do:
let funcRemove = function (p1,p2, callback){
p1.classList.remove('open', 'show');
p2.target.classList.remove('open', 'show');
setTimeout(callback, 1000);
}
In matchCheck
:
let matchCheck = function(evtObj){
funcShow(evtObj);
console.log(turnCheck);
if(turnCheck===1){
setTimeout(function(){}, 1000);
if(evtObj.target.innerHTML===cardChecker){
evtObj.target.classList.add('match');
prevCard.classList.add('match');
}
else{
alert('No match');
}
funcRemove(prevCard, evtObj, function() {
// this part is executed 1000ms later
turnCheck = 0;
cardChecker = '';
prevCard = '';
moves++;
moveElem.innerHTML = moves;
})
return;
}
prevCard = evtObj.target;
cardChecker = evtObj.target.innerHTML;
turnCheck++;
}
What I'm trying to delay is the execution of funcRemove itself, specifically 'p1.classList.remove('open', 'show'); p2.target.classList.remove('open', 'show');' I want these classes to be removed after the alert fires and the alert dialog box is closed. Does that make sense?
– Aditya Gorti
Nov 24 '18 at 3:00
alert
is synchronous. It will pause the rest of the code and wait until you press "ok" to execute the rest of your code. If that's what you need, you just need to movefuncRemove
inside theelse
statement so that it only runs after the alert.
– Kevin Bai
Nov 24 '18 at 13:44
add a comment |
setTimeout
is an asynchronous function which means that it is executed in parallel. You need to put the code that you want to run after the 1000ms delay inside of the function in setTimeout
. For example:
console.log("Print #1");
setTimeout(function() {
console.log("Print me after 1000ms");
}, 1000);
console.log("Print #2");
"Print 2"
will print right after "Print 1"
while the "Print me after 1000ms"
will be printed later.
Furthermore, you can't simply return inside of setTimeout
. Whatever you put inside of setTimeout
is part of a callback function: https://developer.mozilla.org/en-US/docs/Glossary/Callback_function.
To make use of callbacks and setTimeout
correctly in your case, here's what you want to do:
let funcRemove = function (p1,p2, callback){
p1.classList.remove('open', 'show');
p2.target.classList.remove('open', 'show');
setTimeout(callback, 1000);
}
In matchCheck
:
let matchCheck = function(evtObj){
funcShow(evtObj);
console.log(turnCheck);
if(turnCheck===1){
setTimeout(function(){}, 1000);
if(evtObj.target.innerHTML===cardChecker){
evtObj.target.classList.add('match');
prevCard.classList.add('match');
}
else{
alert('No match');
}
funcRemove(prevCard, evtObj, function() {
// this part is executed 1000ms later
turnCheck = 0;
cardChecker = '';
prevCard = '';
moves++;
moveElem.innerHTML = moves;
})
return;
}
prevCard = evtObj.target;
cardChecker = evtObj.target.innerHTML;
turnCheck++;
}
setTimeout
is an asynchronous function which means that it is executed in parallel. You need to put the code that you want to run after the 1000ms delay inside of the function in setTimeout
. For example:
console.log("Print #1");
setTimeout(function() {
console.log("Print me after 1000ms");
}, 1000);
console.log("Print #2");
"Print 2"
will print right after "Print 1"
while the "Print me after 1000ms"
will be printed later.
Furthermore, you can't simply return inside of setTimeout
. Whatever you put inside of setTimeout
is part of a callback function: https://developer.mozilla.org/en-US/docs/Glossary/Callback_function.
To make use of callbacks and setTimeout
correctly in your case, here's what you want to do:
let funcRemove = function (p1,p2, callback){
p1.classList.remove('open', 'show');
p2.target.classList.remove('open', 'show');
setTimeout(callback, 1000);
}
In matchCheck
:
let matchCheck = function(evtObj){
funcShow(evtObj);
console.log(turnCheck);
if(turnCheck===1){
setTimeout(function(){}, 1000);
if(evtObj.target.innerHTML===cardChecker){
evtObj.target.classList.add('match');
prevCard.classList.add('match');
}
else{
alert('No match');
}
funcRemove(prevCard, evtObj, function() {
// this part is executed 1000ms later
turnCheck = 0;
cardChecker = '';
prevCard = '';
moves++;
moveElem.innerHTML = moves;
})
return;
}
prevCard = evtObj.target;
cardChecker = evtObj.target.innerHTML;
turnCheck++;
}
answered Nov 21 '18 at 2:29
Kevin BaiKevin Bai
18817
18817
What I'm trying to delay is the execution of funcRemove itself, specifically 'p1.classList.remove('open', 'show'); p2.target.classList.remove('open', 'show');' I want these classes to be removed after the alert fires and the alert dialog box is closed. Does that make sense?
– Aditya Gorti
Nov 24 '18 at 3:00
alert
is synchronous. It will pause the rest of the code and wait until you press "ok" to execute the rest of your code. If that's what you need, you just need to movefuncRemove
inside theelse
statement so that it only runs after the alert.
– Kevin Bai
Nov 24 '18 at 13:44
add a comment |
What I'm trying to delay is the execution of funcRemove itself, specifically 'p1.classList.remove('open', 'show'); p2.target.classList.remove('open', 'show');' I want these classes to be removed after the alert fires and the alert dialog box is closed. Does that make sense?
– Aditya Gorti
Nov 24 '18 at 3:00
alert
is synchronous. It will pause the rest of the code and wait until you press "ok" to execute the rest of your code. If that's what you need, you just need to movefuncRemove
inside theelse
statement so that it only runs after the alert.
– Kevin Bai
Nov 24 '18 at 13:44
What I'm trying to delay is the execution of funcRemove itself, specifically 'p1.classList.remove('open', 'show'); p2.target.classList.remove('open', 'show');' I want these classes to be removed after the alert fires and the alert dialog box is closed. Does that make sense?
– Aditya Gorti
Nov 24 '18 at 3:00
What I'm trying to delay is the execution of funcRemove itself, specifically 'p1.classList.remove('open', 'show'); p2.target.classList.remove('open', 'show');' I want these classes to be removed after the alert fires and the alert dialog box is closed. Does that make sense?
– Aditya Gorti
Nov 24 '18 at 3:00
alert
is synchronous. It will pause the rest of the code and wait until you press "ok" to execute the rest of your code. If that's what you need, you just need to move funcRemove
inside the else
statement so that it only runs after the alert.– Kevin Bai
Nov 24 '18 at 13:44
alert
is synchronous. It will pause the rest of the code and wait until you press "ok" to execute the rest of your code. If that's what you need, you just need to move funcRemove
inside the else
statement so that it only runs after the alert.– Kevin Bai
Nov 24 '18 at 13:44
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53403226%2funable-to-delay-execution-of-funcremove%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown