I am trying to run a function at setInterval() of "1 second", but it is a bit problematic. I have done everything as shown here but it doesn't work.
Here is my code :
<script>
function test(db_time)
{
var c_db_time= db_time/1000;
var current_time = new Date().getTime()/1000;
return Math.round(current_time - c_db_time);
}
$(".elapsed_time").each(function() {
var time_r = $(this).data('time_raw');
var inter = $(this).html(time_ago(time_r));//parameter to function
setInterval(inter,1000)
});
</script>
And the error is :Uncaught SyntaxError: Unexpected identifier
Solution found thanks to #Bommox & #Satpal
$(".elapsed_time").each(function() {
var time_r = $(this).data('time_raw');
var self = $(this);
var inter = function() {self.html(time_ago(time_r));}
setInterval(inter, 1000);
});
into setInterval function's first parameter you should pass a function or an anonymous function like
setInterval(function(){
console.log("1s delayed")
},1000);
As said before, first argument should be the function:
var self = $(this);
var inter = function() {
self.html(time_ago(time_r));
}
setInterval(inter, 1000);
var self = this;
setInterval(function(){
$(self).html(time_ago(time_r));
},1000);
Have a look here : window.setInterval
window.setTimeout( function() { /*your code which you want to execute after fixed interval, it can function name or lines of code*/}, /*fixedInterval*/);
window.setTimeout( function() { alert("Hello World!"); }, 5000); // it will execute after 5 seconds
Related
This question already has answers here:
How can I use setInterval and clearInterval?
(5 answers)
Closed 8 years ago.
http://jsfiddle.net/x5MY8/2/
HTML
<div id="easy">easy</div>
<div id="hard">hard</div>
JS
function test(mode) {
var asd = this;
this.mode = mode;
setInterval(function () {
alert(asd.mode);
}, 1000);
}
$(document).ready(function () {
$('#easy').on('click', function () {
var stuff = new test('easy');
});
$('#hard').on('click', function () {
var stuff = new test('hard');
});
});
Upon pressing the easy button, an event launches that alerts easy every second. If I press hard afterwards, it will start another event, and it will alert easy, hard, easy, hard.., but I want it to alert only what was pressed at the moment, so I have to clear the previous interval somehow. How can I do that? Somehow, I need to call clearInterval when a button is pressed on the other object, but I don't really know how to.
http://jsfiddle.net/x5MY8/3/
You need to store and clear the interval like so
var interval;
function test(mode) {
var asd = this;
this.mode = mode;
if (interval) {
clearInterval(interval);
}
interval = setInterval(function () {
alert(asd.mode);
}, 1000);
}
Store it in a variable:
var interval = setInterval(function(){
//your code
},1000);
Now, you can clear using clearInterval:
clearInterval(interval);
clear the value when every clicked
var clear=0;
function test(mode) {
var asd = this;
this.mode = mode;
clear=setInterval(function () {
alert(asd.mode);
}, 1000);
}
$(document).ready(function () {
$('#easy').on('click', function () {
clearInterval(clear);
var stuff = new test('easy');
});
$('#hard').on('click', function () {
clearInterval(clear);
var stuff = new test('hard');
});
});
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)}
I have a function that continuously loops through a set of divs (see below) with the class active. I'm trying to modify the function so that when you click on the div it stops the loop and adds the class active to that div.
I've looked through countless examples on StackOverflow, but haven't been able to find something that works for my situation.
Function I'm trying to modify:
function doLoop() {
$('.cd-types, .img-frame, .img-content-container').each(function(){
(function($set){
setInterval(function(){
var $cur = $set.find('.active').removeClass('active');
var $next = $cur.next().length ? $cur.next() : $set.children().eq(0);
$next.addClass('active');
},7000);
})($(this));
});
}
Here is the jfiddle with my attempt on modifying the loop. I know its fairly simple and I've spent the last few hours trying to figure it out. Any advice/direction would be greatly appreciated.
Try
function doLoop() {
$('.cd-types, .img-frame, .img-content-container, .list-items').each(function () {
var $set = $(this);
var interval = setInterval(function () {
var $cur = $set.find('.active').removeClass('active');
var $next = $cur.next().length ? $cur.next() : $set.children().eq(0);
$next.addClass('active');
}, 1000);
$set.data('loop', interval);
$set.on('click', '> *', function () {
$(this).addClass('active').siblings('.active').removeClass('active');
clearInterval($set.data('loop'));
$set.removeData('loop')
});
});
}
Demo: Fiddle, Fiddle2
Simplified the loop function a bit to use the "self" variable trick.
timerID was used to track the setInterval() call so that it could be stopped using clearInterval() call when clicked:
$('.list-items').children().first().addClass('active');
var timerID;
$('.list-items').each(function () {
var self = this;
timerID = setInterval(function () {
var $cur = $(self).find('.active').removeClass('active');
var $next = $cur.next().length ? $cur.next() : $(self).children().eq(0);
$next.addClass('active');
}, 1000);
});
$('.list-items').on('click', function(){
clearInterval(timerID);
alert("Stopped");
});
See the working code at:
JSFiddle
I try to hide a subnavigation when mouseout (second function in .hover()) after 1sec and for that I using setTimeout. I need the this variable in the inner function of setTimeout, so I try it like this:
jQuery(".topnav > ul > li").hover(function() {
jQuery("ul.topnavsub").hide();
jQuery(this).find("ul.topnavsub").show();
}, function() {
var t = setTimeout((function(that){jQuery(that).find("ul.topnavsub").hide(); console.log(that);})(this), 1000);
});
This works but with no delay. 1. Why is there not a 1000milisec deplay and 2. How would I have to do that it works correctly?
If I get this working I want to add: when entering the subnav in that 1000milisec, the setTimeout stops, so that the nav does not get hidden. That's what I have but I couldn't test it cause the hole setTimeout-thing don't work:
jQuery(".topnav > nav > ul > li").hover(function() {
jQuery("ul.topnavsub").off();
jQuery("ul.topnavsub").hide();
jQuery(this).find("ul.topnavsub").show();
}, function() {
var t = setTimeout((function(that){jQuery(that).find("ul.topnavsub").hide(); console.log(that);})(this), 1000);
jQuery(this).find("ul.topnavsub").on("mouseenter", function() {
clearTimeout(t);
jQuery(this).off();
});
});
The anonymous function is being self executed.
var t = setTimeout((function(that){
jQuery(that).find("ul.topnavsub").hide();
console.log(that);
})(this), //(this) is self executing
1000);
});
Alternative:
var that = this;
var t = setTimeout(function(){
jQuery(that).find("ul.topnavsub").hide();
console.log(that);
},1000);
The convoluted way :
var t = setTimeout((function(that){ return function(){
jQuery(that).find("ul.topnavsub").hide();
console.log(that);
}
})(this), 1000);
The less-cool-but-still-works-(-and-is-probably-more-readable-) way :
var that = this;
var t = setTimeout(function(){
jQuery(that).find("ul.topnavsub").hide();
console.log(that);
}, 1000);
It's because you executing a function and pass undefined to setTimeout
var t = setTimeout((function(that){
jQuery(that).find("ul.topnavsub").hide();
console.log(that);
})(this), 1000);
just remove (this) from the end of the function
var self = this;
var t = setTimeout(function(){
jQuery(self).find("ul.topnavsub").hide();
console.log(self);
}, 1000);
I've got a function that takes in a parameter to animate it.
I would like to call back this function with a different parameter in it after the previous one has finished. So far I have this, the animation works but it doesn't do it one after the other:
var thisis = document.getElementById("thisis");
var txt1 = document.getElementById("txt1");
var txt2 = document.getElementById("txt2");
var txt3 = document.getElementById("txt3");
var txt4 = document.getElementById("txt4");
var txt5 = document.getElementById("txt5");
$("#thisis").fadeIn(400, function(){
animetxt(txt1, function() {
animetxt(txt2, function(){
animetxt(txt3, function(){
animetxt(txt4, function(){
animetxt(txt5);
});
});
});
});
});
function animetxt(o){ //.css and .animate on the parameter// }
Your help would be most appreciated :)
Your animetxt function does not have a parameter for the callback function that you are passing to it. Perhaps:
function animetxt(o, f) {
o.animate({/* css */}, f);
}