Could you please help me to understand why this setTimeout logic is not working
The task is simple, when a user clicks a button a function will be executed copying the text of an input and then will print a message explaining that the copy was successful, followed that should wait a second and hide the message. This last part does not work.
I share a stack snippet
(function() {
const copyText = document.querySelector('#email');
const copyButton = document.querySelector('#copy');
const messageBox = document.querySelector('#message');
function copy() {
copyText.select();
document.execCommand('Copy');
displayMessage();
}
function displayMessage() {
messageBox.innerHTML = 'Email copied';
clearMessage();
}
function clearMessage() {
const timeoutID = window.setTimeout(() => {
messageBox.innerHTML = '';
}, 1000);
window.clearTimeout(timeoutID);
}
copyButton.addEventListener('click', copy);
})();
<input type="text" id="email" value="some.user#domain.com">
<button id="copy">Copy</button>
<span id="message"></span>
Thanks for your time
You're immediately clearing the timeout after you set it with window.clearTimeout(timeoutID);. Just remove window.clearTimeout(timeoutID); and it will work.
There's no need to use clearTimeout unless you want to cancel the timeout and keep its callback from being called.
Clear you timeout inside the function as-
function clearMessage() {
const timeoutID = window.setTimeout(() => {
messageBox.innerHTML = '';
window.clearTimeout(timeoutID); // place it here
}, 1000);
}
So, after one second, your unnecessary timeout will be cleared.
You clear the timer straight after declaring it. Remove the window.clearTimeout() call and it will work
Use window.clearTimeout(timeoutID); at the end of your timeout function because setTimeout is async
(function() {
const copyText = document.querySelector('#email');
const copyButton = document.querySelector('#copy');
const messageBox = document.querySelector('#message');
function copy() {
copyText.select();
document.execCommand('Copy');
displayMessage();
}
function displayMessage() {
messageBox.innerHTML = 'Email copied';
clearMessage();
}
function clearMessage() {
const timeoutID = window.setTimeout(() => {
messageBox.innerHTML = '';
window.clearTimeout(timeoutID);
}, 1000);
}
copyButton.addEventListener('click', copy);
})();
<input type="text" id="email" value="some.user#domain.com">
<button id="copy">Copy</button>
<span id="message"></span>
Related
Somehow my same closed ,because the question was not clear to everyone.
I a repeating the same question.
Here i have this input field when the user is typing I am calling handleMessagePress(e) function continuously ,and when the user stops typing I, am calling stop() function after five seconds . But my question is when the user starts typing , i need to call handleMessagePress(e) function only once and wait for 5 seconds and if the user is still typing the same function should be called automatically otherwise the stop function should be called automatically. In simpler words after 5seconds my Program should be able to check user is typing or not whether the user is typing or not if typing call handleMessagePress(e) otherwise call stop function automatically
<input placeholder="type your message" id="messageInputField" onKeyPress={(e) => handleMessagePress(e)}/>
let myInput = document.getElementById("messageInputField");
let timer;
if (myInput) {
myInput.addEventListener("keyup", () => {
clearTimeout(timer);
timer = setTimeout(stop, 5000);
});
}
const stop=()=>{
console.log("user stop typing");
}
const handleMessagePress = (e) => {
console.log("user is typing");
}
let myInput = document.getElementById("messageInputField");
let timer;
let executeHandlePress = true; // flag to watch handle press function execution
if (myInput) {
myInput.addEventListener("keyup", () => {
clearTimeout(timer);
timer = setTimeout(stop, 5000);
});
}
const stop=()=>{
console.log("user stop typing");
}
const handleMessagePress = (e) => {
if(!executeHandlePress){ // if flag false, return
return;
}
console.log("user is typing"); // if true execute
executeHandlePress = false; // toggle flag to false
setTimeout(()=>{
executeHandlePress = true; // reset after 5 seconds
}, 5000);
}
<input placeholder="type your message" id="messageInputField" onKeyPress=" handleMessagePress(event)" />
I have a chat application and I made that when the user writes in the TEXTAREA field to add a text under his name for example Typing ... but for personal reasons I would like this "Typing ..." to appear only once without repeating for each character.
I tried with the one () function but it works again only if user reloads the page.
$("textarea").one('input', function () {
HERE IS MY CODE TO ADD "TYPING.." UNDER HIS NAME
});
function sendMessage() {
HERE IS MY CODE TO DELETE "TYPING..." FROM UNDER HIS NAME
}
How can I make it work?
You could use a kind of throttling, using the following setTimeout-based, function:
// Returns a function that will call its callback argument
// only when a certain delay has passed. Another callback
// can be called to notify that the delay has expired
function throttle(f, milliseconds, ready = () => null) {
let timer = -1;
return function () {
if (timer === -1) f();
clearTimeout(timer);
timer = setTimeout(function () {
timer = -1;
ready();
}, milliseconds);
}
}
function sendMessage(msg) {
$("div").text("typing...");
}
function clearMessage() {
$("div").text("");
}
$("textarea").on('input', throttle(sendMessage, 3000, clearMessage));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea></textarea>
<div></div>
The "typing..." message will clear when during 3 seconds there was no typing. If typing starts again, then the message will be sent/displayed again. The message will not be sent again before it has been cleared.
You could work with a timeout, that will revert the typing state after a certain time. Clear the timeout while the user keeps typing.
const textArea = document.querySelector('.area')
const indicator = document.querySelector('.indicator')
let timeout = null
textArea.addEventListener('input', function() {
clearTimeout(timeout)
indicator.innerText = 'Typing...'
timeout = setTimeout(function() {
indicator.innerText = ''
}, 300)
})
.area,
.indicator {
display: block;
margin: 1rem;
}
<textarea class="area"></textarea>
<span class="indicator"></span>
I have a function that I am trying to call every two seconds.
In the function I am displaying some text which after one second calls another function that hides the text for one second. It essentially flashes the picture every second on and off.
After this finishes, it runs this again for an x amount of times until a condition is met.
I am having issues with timing it correctly.
const getRandomNumber = () => {
myFunction();
textContent = 3;
}
function myFunction() {
updatecurrent.textContent = "";
setTimeout(myFunction, 1000);
}
var myVar = setInterval(getRandomNumber, 2000 );
I don't know why you are using two timers for this, or I don't understand your question very well, but to do it you only needs something like this:
let text = "Some Text";
let display_text = "";
let show = true;
let interval_ref;
function start(){
show = true;
interval_ref = setInterval(()=>{
if(!show) {
clearInterval(interval_ref); // stop the loop
}
else{
if(display_text){
display_text = "";
}
else{
display_text = text;
}
document.getElementById("display-text").innerHTML = display_text;
}
}, 1000);
}
function stop(){
show = false;
}
<div>
<button type="button" onclick="start()">Start</button>
<button type="button" onclick="stop()">stop</button>
</div>
<p id="display-text"></p>
I have this code:
input.addEventListener('keydown', (event) => {
if (event.keyCode === 13 && input.value) {
sendText(input.value);
var response = responseChat(input.value, 'user');
insertResponse(response);
input.value = '';
}
});
In this code, the client types some words to send to app web. So, I need when, the client not type and send some, the page sends a message of: "You are not work!!"
I create this function with setTimeOut but I don't know how to put this in my code:
function first(){
sendText("your are not work!");
}
function sendFirst(){
clearTimeout(time);
time = setTimeout(first, 5000);
}
Could you help me? Thanks
This is what you want. Will console.log 'you are not working!' after 3 seconds of keyboard inactivity. Click 'Run code snippet' below to try it out.
const sendText = console.log;
const input = document.getElementById('fred');
let timeout
const restart = () => {
clearTimeout(timeout);
timeout = setTimeout(() => {
sendText("you are not working!");
}, 3000);
}
restart();
input.addEventListener('keydown', (event) => {
restart();
if (event.keyCode === 13 && input.value) {
sendText(input.value);
// var response = responseChat(input.value, 'user');
// insertResponse(response);
input.value = '';
}
});
<input id="fred">
I am trying to have the setTimeout() function start only after I click a button as opposed to when the page loads. Here is my code:
function convert() {
'use strict';
var utcDate = new Date();
var message;
var output = document.getElementById('output2');
message = 'today is ' + utcDate.toUTCString();
if (output.textContent !== undefined) {
output.textContent = message;
} else {
output.innerText = message;
}
document.getElementById('output2').value = message;
}
button.onclick = setTimeout(convert, 5000);
If you want to start on click of the button. Than you this should be the way:
button.onclick = function() { setTimeout(convert, 5000); }
change
button.onclick = setTimeout(convert, 5000);
to
button.onclick = function () { setTimeout(convert, 5000);}
or you could use jQuery if you are already loading the library for something else
$('#idOfButton').click(function () { setTimeout(convert, 5000);}); //more efficient than $.on()
or another way using jQuery
$('#idOfButton').on('click', function () { setTimeout(convert, 5000); });
As with many tasks in programming, there are many ways to accomplish your task
button.onclick = function(){setTimeout(convert, 5000);}
You need to put the setTimeout part in a function. So that last line would look like
button.onclick = function(){setTimeout(convert,5000)}