setTimeout still runs when clearTimeout has been called Javascript
0
I've had problems like this before in the past. I can't seem to figure out what on earth I seem to be doing wrong here.
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
div#rightSideContent {
width:48%;
height:100%;
float:right;
margin-left:10px;
position: relative;
}
span.explain_pass {
background:#111111;
color:#b4b4b4;
position: absolute;
top:-150px;
left:-17px;
padding:10px;
width:200px;
opacity: 0.9;
border-radius:5px;
}
span.explain_pass:after {
content: ' ';
position: absolute;
left:50%;
transform:translate(-50%);
bottom:-19px;
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 20px solid #111111;
}
div#content {
width:100%;
margin: 300px;
}
</style>
<script type="text/javascript">
var showHint = {
timeOut : null,
hint : function(obj) {
clearTimeout(showHint.timeOut);
showHint.timeOut = null;
var explain_pass = document.createElement("span");
explain_pass.setAttribute("id","explain_pass");
explain_pass.classList.add("explain_pass");
explain_pass.textContent = obj.dataset.title;
if(!document.getElementById('explain_pass')) {
document.getElementById('rightSideContent').appendChild(explain_pass);
}
if(showHint.timeOut == null) {
document.getElementsByClassName('questionMark')[0].addEventListener('mouseleave',function() {
console.log(showHint.timeOut);
showHint.timeOut = setTimeout(function(){
try{
document.getElementById('rightSideContent').removeChild(document.getElementById('explain_pass'));
}
catch(e) {}
},3000);
} );
}
}
}
window.onload = function() {
document.getElementsByClassName('questionMark')[0].addEventListener('mouseenter',function(){
showHint.hint(this);
});
}
</script>
</head>
<body>
<div id="content">
<div id="rightSideContent">
<label for="password" class="inputColumn">Password <span
class="required">*</span> <span class="questionMark" data-title="Must
contain at least 2 characters long including lowercase characters,
uppercase characters, and numbers"><svg width="20" fill="#333333"
height="20" xmlns="http://www.w3.org/2000/svg" style="pointer-
event:none;" viewBox="0 0 512 512"><path d="M504 256c0 136.997-111.043
248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248
248zM262.655 90c-54.497 0-89.255 22.957-116.549 63.758-3.536 5.286-2.353
12.415 2.715 16.258l34.699 26.31c5.205 3.947 12.621 3.008 16.665-2.122
17.864-22.658 30.113-35.797 57.303-35.797 20.429 0 45.698 13.148 45.698
32.958 0 14.976-12.363 22.667-32.534 33.976C247.128 238.528 216 254.941
216 296v4c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12v-1.333c0-
28.462 83.186-29.647 83.186-106.667 0-58.002-60.165-102-116.531-
102zM256 338c-25.365 0-46 20.635-46 46 0 25.364 20.635 46 46 46s46-
20.636 46-46c0-25.365-20.635-46-46-46z"/></svg></span> <input
name="password" class="passRestrict" id="password" type="password"
placeholder="Password" maxlength="255" autocomplete="off" /> <span
class="showHidePass">show</span></label>
</div>
<div>
</body>
</html>
I clear the timeout at the begining of the hint script, but the timeout still runs and ends up removing the hint box, even though my mouse hasn't left the object that I was hovering over. Any tips and help would be greatly appreciated.
Thanks,
Jon W
settimeout cleartimeout
asked yesterday
Jon WJon W
14
add a comment |
0
I've had problems like this before in the past. I can't seem to figure out what on earth I seem to be doing wrong here.
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
div#rightSideContent {
width:48%;
height:100%;
float:right;
margin-left:10px;
position: relative;
}
span.explain_pass {
background:#111111;
color:#b4b4b4;
position: absolute;
top:-150px;
left:-17px;
padding:10px;
width:200px;
opacity: 0.9;
border-radius:5px;
}
span.explain_pass:after {
content: ' ';
position: absolute;
left:50%;
transform:translate(-50%);
bottom:-19px;
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 20px solid #111111;
}
div#content {
width:100%;
margin: 300px;
}
</style>
<script type="text/javascript">
var showHint = {
timeOut : null,
hint : function(obj) {
clearTimeout(showHint.timeOut);
showHint.timeOut = null;
var explain_pass = document.createElement("span");
explain_pass.setAttribute("id","explain_pass");
explain_pass.classList.add("explain_pass");
explain_pass.textContent = obj.dataset.title;
if(!document.getElementById('explain_pass')) {
document.getElementById('rightSideContent').appendChild(explain_pass);
}
if(showHint.timeOut == null) {
document.getElementsByClassName('questionMark')[0].addEventListener('mouseleave',function() {
console.log(showHint.timeOut);
showHint.timeOut = setTimeout(function(){
try{
document.getElementById('rightSideContent').removeChild(document.getElementById('explain_pass'));
}
catch(e) {}
},3000);
} );
}
}
}
window.onload = function() {
document.getElementsByClassName('questionMark')[0].addEventListener('mouseenter',function(){
showHint.hint(this);
});
}
</script>
</head>
<body>
<div id="content">
<div id="rightSideContent">
<label for="password" class="inputColumn">Password <span
class="required">*</span> <span class="questionMark" data-title="Must
contain at least 2 characters long including lowercase characters,
uppercase characters, and numbers"><svg width="20" fill="#333333"
height="20" xmlns="http://www.w3.org/2000/svg" style="pointer-
event:none;" viewBox="0 0 512 512"><path d="M504 256c0 136.997-111.043
248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248
248zM262.655 90c-54.497 0-89.255 22.957-116.549 63.758-3.536 5.286-2.353
12.415 2.715 16.258l34.699 26.31c5.205 3.947 12.621 3.008 16.665-2.122
17.864-22.658 30.113-35.797 57.303-35.797 20.429 0 45.698 13.148 45.698
32.958 0 14.976-12.363 22.667-32.534 33.976C247.128 238.528 216 254.941
216 296v4c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12v-1.333c0-
28.462 83.186-29.647 83.186-106.667 0-58.002-60.165-102-116.531-
102zM256 338c-25.365 0-46 20.635-46 46 0 25.364 20.635 46 46 46s46-
20.636 46-46c0-25.365-20.635-46-46-46z"/></svg></span> <input
name="password" class="passRestrict" id="password" type="password"
placeholder="Password" maxlength="255" autocomplete="off" /> <span
class="showHidePass">show</span></label>
</div>
<div>
</body>
</html>
I clear the timeout at the begining of the hint script, but the timeout still runs and ends up removing the hint box, even though my mouse hasn't left the object that I was hovering over. Any tips and help would be greatly appreciated.
Thanks,
Jon W
settimeout cleartimeout
asked yesterday
Jon WJon W
14
Please provide a Minimal, Complete, and Verifiable example, that also shows how you are calling these object methods.
– misorude
yesterday
I would add more console.log() statements to ensure that showHint.hint() is executed, mouseleave executed, etc
– ycnix
yesterday
Any other ideas?
– Jon W
yesterday
add a comment |
0
0
0
I've had problems like this before in the past. I can't seem to figure out what on earth I seem to be doing wrong here.
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
div#rightSideContent {
width:48%;
height:100%;
float:right;
margin-left:10px;
position: relative;
}
span.explain_pass {
background:#111111;
color:#b4b4b4;
position: absolute;
top:-150px;
left:-17px;
padding:10px;
width:200px;
opacity: 0.9;
border-radius:5px;
}
span.explain_pass:after {
content: ' ';
position: absolute;
left:50%;
transform:translate(-50%);
bottom:-19px;
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 20px solid #111111;
}
div#content {
width:100%;
margin: 300px;
}
</style>
<script type="text/javascript">
var showHint = {
timeOut : null,
hint : function(obj) {
clearTimeout(showHint.timeOut);
showHint.timeOut = null;
var explain_pass = document.createElement("span");
explain_pass.setAttribute("id","explain_pass");
explain_pass.classList.add("explain_pass");
explain_pass.textContent = obj.dataset.title;
if(!document.getElementById('explain_pass')) {
document.getElementById('rightSideContent').appendChild(explain_pass);
}
if(showHint.timeOut == null) {
document.getElementsByClassName('questionMark')[0].addEventListener('mouseleave',function() {
console.log(showHint.timeOut);
showHint.timeOut = setTimeout(function(){
try{
document.getElementById('rightSideContent').removeChild(document.getElementById('explain_pass'));
}
catch(e) {}
},3000);
} );
}
}
}
window.onload = function() {
document.getElementsByClassName('questionMark')[0].addEventListener('mouseenter',function(){
showHint.hint(this);
});
}
</script>
</head>
<body>
<div id="content">
<div id="rightSideContent">
<label for="password" class="inputColumn">Password <span
class="required">*</span> <span class="questionMark" data-title="Must
contain at least 2 characters long including lowercase characters,
uppercase characters, and numbers"><svg width="20" fill="#333333"
height="20" xmlns="http://www.w3.org/2000/svg" style="pointer-
event:none;" viewBox="0 0 512 512"><path d="M504 256c0 136.997-111.043
248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248
248zM262.655 90c-54.497 0-89.255 22.957-116.549 63.758-3.536 5.286-2.353
12.415 2.715 16.258l34.699 26.31c5.205 3.947 12.621 3.008 16.665-2.122
17.864-22.658 30.113-35.797 57.303-35.797 20.429 0 45.698 13.148 45.698
32.958 0 14.976-12.363 22.667-32.534 33.976C247.128 238.528 216 254.941
216 296v4c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12v-1.333c0-
28.462 83.186-29.647 83.186-106.667 0-58.002-60.165-102-116.531-
102zM256 338c-25.365 0-46 20.635-46 46 0 25.364 20.635 46 46 46s46-
20.636 46-46c0-25.365-20.635-46-46-46z"/></svg></span> <input
name="password" class="passRestrict" id="password" type="password"
placeholder="Password" maxlength="255" autocomplete="off" /> <span
class="showHidePass">show</span></label>
</div>
<div>
</body>
</html>
I clear the timeout at the begining of the hint script, but the timeout still runs and ends up removing the hint box, even though my mouse hasn't left the object that I was hovering over. Any tips and help would be greatly appreciated.
Thanks,
Jon W
settimeout cleartimeout
asked yesterday
Jon WJon W
14
I've had problems like this before in the past. I can't seem to figure out what on earth I seem to be doing wrong here.
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
div#rightSideContent {
width:48%;
height:100%;
float:right;
margin-left:10px;
position: relative;
}
span.explain_pass {
background:#111111;
color:#b4b4b4;
position: absolute;
top:-150px;
left:-17px;
padding:10px;
width:200px;
opacity: 0.9;
border-radius:5px;
}
span.explain_pass:after {
content: ' ';
position: absolute;
left:50%;
transform:translate(-50%);
bottom:-19px;
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 20px solid #111111;
}
div#content {
width:100%;
margin: 300px;
}
</style>
<script type="text/javascript">
var showHint = {
timeOut : null,
hint : function(obj) {
clearTimeout(showHint.timeOut);
showHint.timeOut = null;
var explain_pass = document.createElement("span");
explain_pass.setAttribute("id","explain_pass");
explain_pass.classList.add("explain_pass");
explain_pass.textContent = obj.dataset.title;
if(!document.getElementById('explain_pass')) {
document.getElementById('rightSideContent').appendChild(explain_pass);
}
if(showHint.timeOut == null) {
document.getElementsByClassName('questionMark')[0].addEventListener('mouseleave',function() {
console.log(showHint.timeOut);
showHint.timeOut = setTimeout(function(){
try{
document.getElementById('rightSideContent').removeChild(document.getElementById('explain_pass'));
}
catch(e) {}
},3000);
} );
}
}
}
window.onload = function() {
document.getElementsByClassName('questionMark')[0].addEventListener('mouseenter',function(){
showHint.hint(this);
});
}
</script>
</head>
<body>
<div id="content">
<div id="rightSideContent">
<label for="password" class="inputColumn">Password <span
class="required">*</span> <span class="questionMark" data-title="Must
contain at least 2 characters long including lowercase characters,
uppercase characters, and numbers"><svg width="20" fill="#333333"
height="20" xmlns="http://www.w3.org/2000/svg" style="pointer-
event:none;" viewBox="0 0 512 512"><path d="M504 256c0 136.997-111.043
248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248
248zM262.655 90c-54.497 0-89.255 22.957-116.549 63.758-3.536 5.286-2.353
12.415 2.715 16.258l34.699 26.31c5.205 3.947 12.621 3.008 16.665-2.122
17.864-22.658 30.113-35.797 57.303-35.797 20.429 0 45.698 13.148 45.698
32.958 0 14.976-12.363 22.667-32.534 33.976C247.128 238.528 216 254.941
216 296v4c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12v-1.333c0-
28.462 83.186-29.647 83.186-106.667 0-58.002-60.165-102-116.531-
102zM256 338c-25.365 0-46 20.635-46 46 0 25.364 20.635 46 46 46s46-
20.636 46-46c0-25.365-20.635-46-46-46z"/></svg></span> <input
name="password" class="passRestrict" id="password" type="password"
placeholder="Password" maxlength="255" autocomplete="off" /> <span
class="showHidePass">show</span></label>
</div>
<div>
</body>
</html>
I clear the timeout at the begining of the hint script, but the timeout still runs and ends up removing the hint box, even though my mouse hasn't left the object that I was hovering over. Any tips and help would be greatly appreciated.
Thanks,
Jon W
settimeout cleartimeout
settimeout cleartimeout
asked yesterday
Jon WJon W
14
asked yesterday
Jon WJon W
14
edited yesterday
Jon W
asked yesterday
Jon WJon W
14
asked yesterday
Jon WJon W
14
asked yesterday
Jon WJon W
14
14
Please provide a Minimal, Complete, and Verifiable example, that also shows how you are calling these object methods.
– misorude
yesterday
I would add more console.log() statements to ensure that showHint.hint() is executed, mouseleave executed, etc
– ycnix
yesterday
Any other ideas?
– Jon W
yesterday
add a comment |
Please provide a Minimal, Complete, and Verifiable example, that also shows how you are calling these object methods.
– misorude
yesterday
I would add more console.log() statements to ensure that showHint.hint() is executed, mouseleave executed, etc
– ycnix
yesterday
Any other ideas?
– Jon W
yesterday
Please provide a Minimal, Complete, and Verifiable example, that also shows how you are calling these object methods.
– misorude
yesterday
Please provide a Minimal, Complete, and Verifiable example, that also shows how you are calling these object methods.
– misorude
yesterday
I would add more console.log() statements to ensure that showHint.hint() is executed, mouseleave executed, etc
– ycnix
yesterday
I would add more console.log() statements to ensure that showHint.hint() is executed, mouseleave executed, etc
– ycnix
yesterday
Any other ideas?
– Jon W
yesterday
Any other ideas?
– Jon W
yesterday
add a comment |
0
active
oldest
votes
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
});
}
});
draft saved
draft discarded
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%2f54251845%2fsettimeout-still-runs-when-cleartimeout-has-been-called-javascript%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
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.
draft saved
draft discarded
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%2f54251845%2fsettimeout-still-runs-when-cleartimeout-has-been-called-javascript%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
Please provide a Minimal, Complete, and Verifiable example, that also shows how you are calling these object methods.
– misorude
yesterday
I would add more console.log() statements to ensure that showHint.hint() is executed, mouseleave executed, etc
– ycnix
yesterday
Any other ideas?
– Jon W
yesterday