I need to stop the interval after changing all messages but I can't. Can you help me? Thanks.
<script>
$(document).ready(function(){
var textos = ["Hi", "Fine?", "0"];
var atual = 0;
$('#display').text(textos[atual++]);
setInterval(function() {
$('#display').fadeOut(function() {
if (atual >= textos.length) atual = 0;
$('#display').text(textos[atual++]).fadeIn();
});
}, 10);
});
</script>
use for loop? or put this in a var and cleat when needed
<script>
$(document).ready(function(){
var textos = ["Hi", "Fine?", "0"];
var atual = 0;
// here
var intervalId;
$('#display').text(textos[atual++]);
intervalId = setInterval(function() {
$('#display').fadeOut(function() {
if (atual >= textos.length) {
// clear
clearInterval(intervalId);
} else {
$('#display').text(textos[atual++]).fadeIn();
}
});
}, 1000);
});
</script>
to keep last one try this
$(document).ready(function(){
var textos = ["Hi", "Fine?", "0"];
var atual = 0;
var intervalId;
$('#display').text(textos[atual++]);
intervalId = setInterval(function() {
if (atual >= textos.length - 1) {
clearInterval(intervalId);
} else {
$('#display').fadeOut(function() {
$('#display').text(textos[atual++]).fadeIn();
});
}
}, 1000);
});
without animations
$(document).ready(function(){
var textos = ["Hi", "Fine?", "terwer", "ewrew rwer", "sdfdsf"];
var index = 0;
function showText() {
if (index >= textos.length) {
return;
}
var text = textos[index];
$('#display').append(text + ' ');
setTimeout(function() {
removeText(text);
}, 4000);
index++;
setTimeout(showText, 1000);
}
function removeText(text) {
var elements = $('#display').children();
for (var i = 0; i < elements.length; i++) {
var element = $(elements[i]);
if (element.text().trim() == text) {
element.remove();
break;
}
}
}
showText();
});
If your goal is to stop the interval, then you can use clearInterval()
<script>
$(document).ready(function(){
var textos = ["Hi", "Fine?", "0"];
var atual = 0;
$('#display').text(textos[atual++]);
let myinterval = setInterval(function() {
$('#display').fadeOut(function() {
if (atual >= textos.length) atual = 0;
$('#display').text(textos[atual++]).fadeIn();
});
}, 10);
// later when you want to stop it:
clearInterval(myinterval);
});
</script>
you can fined more here: https://developer.mozilla.org/en-US/docs/Web/API/clearInterval
Use Clear Interval to stop current interval.
<script>
$(document).ready(function(){
var textos = ["Hi", "Fine?", "0"];
var atual = 0;
$('#display').text(textos[atual++]);
var interval = setInterval(function() {
$('#display').fadeOut(function() {
if (atual >= textos.length) atual = 0;
$('#display').text(textos[atual++]).fadeIn();
});
clearInt();
}, 10);
function clearInt(){
clearInterval(interval);
}
});
</script>
This will help you.
Related
The loop in myFunctionlp, is not working to the specified user input through prompt which is round in this case. I want that loop to run until the input of the user which I am getting through prompt. myFunctionlp is being called by a button press.
var round = prompt("Enter number of rounds");
var defaultNumberOfRounds = 1;
var roundno = isNaN(Number(round)) ? defaultNumberOfRounds : round;
var images_arr = ["../img/paper.png", "../img/stone.png",
"../img/sisor.png"
];
var size = images_arr.length;
console.log(`round: ${round}, roundno: ${roundno}`);
function myFunctionlp() {
for (var i = 0; i < roundno; i++) { //this loop
console.log(i);
setInterval(function() {
var x = Math.floor(size * Math.random())
$('#random').attr('src', images_arr[x]); // JQuery
}, 1500);
setInterval(function() {
var sound = new Audio("../audio/audio.mp3");
sound.play();
if (s == 50) {
sound.pause();
} else {
alert("Hello");
}
}, 3000);
}
}
function stop() {
for (s = 0; s < 51; s++) {
console.log(s);
}
}
function extra() {
var music = new Audio("../audio/audio_3.mp3");
music.play();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="onClick" onclick="myFunctionlp()">Play</button>
My problem is when I hover over something really fast, it executes the first function and then the second function when the mouse leave the text. The two functions are executed completely. I would like something like, if the mouse leave before a specific time, do something. For instance, change the text to "Fr"
$( "#nav6" ).hover(
function() {
navsix(6);
}, function() {
<!-- clearTimeout(TO) -->
nav6out(6);
}
);
function navsix(i) {
if (window.matchMedia("(min-width: 600px)").matches) {
var elem = document.getElementById("nav6");
var str = "Français";
var len = str.length + 1 - i;
var TO = setTimeout(function () {
elem.innerHTML = str.substring(0, len);
if (--i) navsix(i);
}, 50)
}
}
function nav6out(i) {
if (window.matchMedia("(min-width: 600px)").matches) {
var elem = document.getElementById("nav6");
var str = "Français";
len = i + 1
var TO = setTimeout(function () {
elem.innerHTML = str.substring(0, len);
if (--i) nav6out(i);
}, 50)
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="topnav-right"><a id="nav6" href="#Francais">Fr</a></div>
You're on the right track with clearTimeout(). I added clearTimeout() right before each of your setTimeout() functions and declared TO at the top.
var TO = "";
var hoverTimeout = "";
$("#nav6").hover(
function() {
hoverTimeout = setTimeout(function() {
navsix(6);
}, 200)
},
function() {
clearTimeout(hoverTimeout);
nav6out(6);
}
);
function navsix(i) {
if (window.matchMedia("(min-width: 600px)").matches) {
var elem = document.getElementById("nav6");
var str = "Français";
var len = str.length + 1 - i;
clearTimeout(TO);
TO = setTimeout(function() {
elem.innerHTML = str.substring(0, len);
if (--i) navsix(i);
}, 50)
}
}
function nav6out(i) {
if (window.matchMedia("(min-width: 600px)").matches) {
var elem = document.getElementById("nav6");
var str = "Français";
if (elem.innerHTML.length > 2) {
len = i + 1;
clearTimeout(TO);
TO = setTimeout(function() {
elem.innerHTML = str.substring(0, len);
if (--i) nav6out(i);
}, 50)
}
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="topnav-right"><a id="nav6" href="#Francais">Fr</a></div>
Please help me convert this JQuery to Javascript progress bar script
var generateButton = document.getElementById("generate");
if (generateButton.addEventListener) {
generateButton.addEventListener("click", random, false);
}
else if (generateButton.attachEvent) {
generateButton.attachEvent('onclick', random);
}
function random(e) {
setTimeout(function(){
$('.progress .bar').each(function() {
var me = $(this);
var perc = me.attr("data-percentage");
//TODO: left and right text handling
var current_perc = 0;
var progress = setInterval(function() {
if (current_perc>=perc) {
clearInterval(progress);
} else {
current_perc +=1;
me.css('width', (current_perc)+'%');
}
me.text((current_perc)+'%');
}, 50);
});
},300);
var num = Math.random();
var greetingString = num;
document.getElementById("rslt").innerText = greetingString;
}
Here is the Live version: http://jsfiddle.net/chjjK/9/
Pretty easy actually, use document.getElementsByClassName and a for loop to replace the each:
var bar = document.getElementsByClassName("bar");
for (var i = 0; i < bar.length; i++) {
var me = bar[i];
var perc = me.getAttribute("data-percentage");
var current_perc = 0;
var progress = setInterval(function() {
if (current_perc>=perc) {
clearInterval(progress);
} else {
current_perc +=1;
me.style.width = current_perc+'%';
}
me.innerHTML = ((current_perc)+'%');
}, 50);
}
}, 300);
Demo: http://jsfiddle.net/chjjK/13/
I have tried for loops, etc, but i am having trouble running this function only twice
function play() {
setInterval(function(){
var next = $(".furniture .active, .pets .active").next("img");
var i = 0;
var current = next.prev("img");
current.removeClass("active").addClass("current")
next.removeClass("current").addClass("active");
if (!next.length) {
next = $(".furniture img:first");
};
}
}, 3000);
}
play();
You probably want something like this:
function play(timeout) {
setTimeout(function() {
...
}, timeout);
}
play(3000);
play(6000);
var counter = 0;
play();
function play()
{
counter = counter + 1;
var next = $(".furniture .active, .pets .active").next("img");
var i = 0;
var current = next.prev("img");
current.removeClass("active").addClass("current")
next.removeClass("current").addClass("active");
if (!next.length) {
next = $(".furniture img:first");
};
}
if (counter < 2)
{
setTimeout(play(), 3000);
}
}
I have a problem with my timer -
var myTimer = function () {
var d = Date.now();
// var t=d.toLocaleTimeString();
var timerSeconds = Math.round((od - d) / 1000);
document.getElementById("timer").innerHTML = "Time left for this tour:" + timerSeconds;
if (timerSeconds > 0) {
setTimeout(arguments.callee, 1000);
} else {
finTour();
}
};
myTimer();
it calls this function:
var finTour = function () {
deleteCartes();
randomCell();
od = Date.now() + 5000;
myTimer();
window.setTimeout(function () {
tourOfComp();
}, 5000)
var tourOfComp = function () {
for (var i = 0; i < 12; i++) {
if (document.getElementsByTagName("td")[i].style.backgroundColor == "aqua") {
document.getElementsByTagName("td")[i].firstChild.data = cartes[prochaineCarte++]
}
}
for (var j = 0; j < 12; j++) {
if (document.getElementsByTagName("td")[j].style.backgroundColor == "aqua")
document.getElementsByTagName("td")[j].style.backgroundColor = "";
}
for (var k = 0; k < 3; k++) {
tab[k].value = "";
}
od = Date.now() + timeFixe;
myTimer();
};
the problem is when I fix the time 20, it calls these two last function and the time is always 5 and never 20 it seems that it doesn`t renew the time, but only repeat this:
window.setTimeout(function ()
{
tourOfComp();
},5000)