Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
i try to develop a page and i have to use setTimeout function because i need to load my video in my page two seconds later.
In order to do that, i wrote this,
window.onload = function () {
player = new Player('playerObject');
setTimeout(player.playByUrl($mp4Link),3000);
}
but this is not working why ?
Use callback:
setTimeout(function(){
player.playByUrl($mp4Link);
},3000);
With your previous statement, the code was executing immediately (because you were calling it directly by specifying param and parenthesis eg playByUrl($mp4Link)) whereas setTimeout needs a callback.
You cannot add parameters to the function. However you can simply use an anonymuos function as callback and call the function in there (with the parameters).
window.onload = function () {
player = new Player('playerObject');
setTimeout(function() {
player.playByUrl($mp4Link);
}, 3000);
}
setTimeout requires a function
window.onload = function () {
player = new Player('playerObject');
setTimeout(function(){
player.playByUrl($mp4Link);
},3000);
}
You need to pass a function reference to setTimeout, but I guess the return value from .playByUrl() is not a function. So either go with
setTimeout(function() {
player.playByUrl($mp4Link);
},3000);
or use ES5 .bind()
setTimeout(player.playByUrl.bind(null,$mp4Link),3000);
player.playByUrl($mp4Link) is the returned value.
try
setTimeout("player.playByUrl($mp4Link)",3000);
or
setTimeout(player.playByUrl,3000, $mp4Link);
The latter does not work with IE and so should be modified.
try to add player.load(); as follow:
player.load();
setTimeout(function(){
player.setAttribute("src","http://www.w3school.com.cn/example/html5/mov_bbb.mp4");
player.play();
},5000)
Related
Trying to get the code to automatically change page using setTimeout, but I do not get it to work.
setTimeout()(page3, 500);
function page3() {
changepage3('automatic')
}
This is what my code looks like right now, but I am suspecting that this is not enough. Anyone knows what is missing?
try this one
function page3() {
changepage3('automatic')
}
setTimeout(page3, 500);
setTimout needs a specific syntax to work, check it out on the best JavaScript documentation by Mozilla: https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout#Syntax
Here is an example
saySomethingAfter(5);
function saySomethingAfter(second) {
setTimeout(saySomething, second * 1000);
}
function saySomething() {
console.log("Something");
}
Your question is "How can I automatically change a page in Javascript?" using setTimeout. Let's analyse the needs:
change a page → open a new URL (cf. Open URL in same window and in same tab)
automatically using setTimeout → with the correct syntax
function changePage(url) {
window.open(url, "_self");
}
function changePageAfter5sec(url) {
setTimeout(function() {
changePage(url)
}, 5000);
}
changePageAfter5sec("https://stackoverflow.com")
Another way using beautiful functional JavaScript:
function changePage(url) {
return () => {
window.open(url, "_self");
}
}
function changePageAfter(second) {
return (url) => {
setTimeout(changePage(url), second*1000);
}
}
const changePageAfter5sec = changePageAfter(5);
changePageAfter5sec("https://stackoverflow.com")
You have 2 major problems in the code snippet provided:
That is not correct setTimeout() syntax - thus it doesn't actually work.
Even if it did work, it would call 1 function that uses another function which doesn't exist thus breaking the code.
fix problem number 1:
window.setTimeout(changePage, 5000);
now we have a running timeout that will trigger 5000 milliseconds after initiation(usually).
so let's fix problem 2 and let changepage() call an actual proper url opening function:
function changePage(){
window.open(urlOfPage3);
}
Finally a simpler version with an anonymous callback function in the setTimeout:
window.setTimeout(function(){
window.open(urlOfPage3);
}, 5000);
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I'm using onclick for an element, but need to pass a callback to it like this:
function cb_func() {
alert("hello world!");
}
function foobar(i, cb) {
do something
if (cb != undefined)
cb();
}
onclick="javascript:foobar(1, cb_func)"
foobar gets called, but my cb_func isn't - in fact when I step in to cb() usinf Firebug, it shows me the HTML for the entire page.
Any ideas how I might achieve this?
Use event delegation:
$(document).on('click', '.dynamicGeneratedEl', function(event){
// do something
cb_func();
});
Where .dynamicGeneratedEl is a suitable selector for your case.
comment the line // do something
function cb_func() {
alert("hello world!");
}
function foobar(i, cb) {
// do something
if (cb != undefined)
cb();
}
Try this:
https://jsfiddle.net/h3ckcgvv/2/
var nextFunction = function() {
// some more stuff happens
}
var processClick = function() {
// some stuff happens
// condition
nextFunction();
}
$('.js-click-me').click(processClick);
The condition could be anything, based on page inspection, javascript variable state, data attributes on the clicked HTML element etc. Much more stable and maintainable than onclick attributes and hardcoding the callback into every call where it's needed.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
very new to JS and just playing around with examples I have written from a book.
With the code below - why are my functions not being executed? I am calling them and the syntax is correct. If I place document.addEventListener ("DOMContentLoaded" , init , false) ;
then the init() function will execute but not the test() function.
I am also confused as to where the document.addEventListener should be placed normally and exactly what it means with regards to the init function. Should the init() function always be called first? What normally goes in an init()function?
Thanks in advance. Code below ;
function init() {
var panel = document.getElementById("panel");
panel.innerHTML = "Hello World";
}
function test() {
var panel = document.getElementById("panel");
panel.innerHTML = "See ya";
}
init();
test();
You are probably executing the functions before the DOM elements have been loaded. The page is read from top to bottom. If the function executes before the HTML is read, the element won't exist.
Many developers make the script the last element in the body to avoid this.
Or use an onload handler, like this
window.onload = function () {
init();
test();
}
The functions do not need to be defined in the handler
EDIT. It is also true that you are writing data to the same element, so only the second function will have a result you can see. You can write to a separate element, or do as one answer suggests and add the data together.
It sounds like the methods are being called, but they are raising errors because they are called before the DOM is finished loading. Under normal circumstances, script like this will be executed as soon as the browser reaches it, so if this happens before the DOM is loaded (which is usually the case), the calls to document.getElementById() will fail because the document hasn't been loaded.
You're close with your call to document.addEventListener ("DOMContentLoaded" , init , false); - this tells the browser to call init when the DOM has been loaded. However, you're only calling init in this case, so test() doesn't get called.
I would suggest removing your inline calls to init(); and test();, then adding the following:
function onLoaded(){
init();
test();
}
and then calling onLoaded from your event listener:
document.addEventListener ("DOMContentLoaded" , onLoaded , false);
This question already has answers here:
delayed addclass/remove class function not working
(2 answers)
Closed 9 years ago.
Can I add a delay before the addClass method?
This doesnt seem to be working for me.
$("#btn").click(function doStuff(){
$("#myoBj").show();
$("#myoBj").animate({left: "15"});
$(".secondObj").delay(1000).addClass('glow');
$(".thirdObj").addClass('topGlow');
)};
Thanks
From the documentation:
The .delay() method is best for delaying between queued jQuery
effects. Because it is limited—it doesn't, for example, offer a way to
cancel the delay—.delay() is not a replacement for JavaScript's native
setTimeout function, which may be more appropriate for certain use
cases.
Therefore .delay() is not a substitute for JavaScript's setTimeout().
Use this:
$("#btn").click(function doStuff(){
$("#myoBj").show();
$("#myoBj").animate({left: "15"});
setTimeout(function(){ $(".secondObj").addClass('glow'); }, 1000);
$(".thirdObj").addClass('topGlow');
)};
$("#btn").click(function doStuff(){
$("#myoBj").show();
$("#myoBj").animate({left: "15"});
setTimeout(function () {
// Wait 1 second and add the class
$(".secondObj").addClass('glow');
}, 1000);
$(".thirdObj").addClass('topGlow');
});
Yes, but not using the jQuery delay function, as the action needs to be on the animation queue (or, "an" animation queue, if you define one) for that to work; use setTimeout instead:
setTimeout(function() { /* */ }, timeout);
You can use the queue() method's callback to fire your code after the delay completes.
$("#btn").click(function doStuff(){
$("#myoBj").show();
$("#myoBj").animate({left: "15"});
$(".secondObj").delay(1000).queue(function() {
$(this).addClass('glow');
});
$(".thirdObj").addClass('topGlow');
)};
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I need to be able to cancel an event based on the amount of time an element is hovered on. Say when I set the delay to 500ms, when the element is being hovered on for less than that, an event should be cancelled, otherwise it is fired. The delay() and setTimeout() function seem incapable of doing that.
You can try something like this instead of using jQuery delay method.
Working demo
var timeoutId = null;
$("selector").hover(function(){
if(timeoutId)
clearTimeout(timeoutId);
timeoutId = setTimeout(function(){
alert("do your stuff here");
}, 5000);
}, function(){
clearTimeout(timeoutId);
});
Someone might come up with something cleaner but the code below will be able to handle what you are asking. It requires 500 milliseconds to pass before the code inside the event can be triggered again. Could probably clean it up so that timer/delayMet aren't potentially global variables.
I'm using $('a').click as an example selector and event.
var timer,
delayMet = true;
$('a').click(function () {
if(delayMet === true) {
// your code here
}
else {
delayMet = false;
setTimeout(function () {
delayMet = true;
}, 500);
}
});
You can cancel setTimeout() by doing the following.
var timer = setTimeout(function(){...},5000);
...
clearTimeout(timer);
From jQuery .delay() docs:
The .delay() method is best for delaying between queued jQuery
effects. Because it is limited—it doesn't, for example, offer a way to
cancel the delay—.delay() is not a replacement for JavaScript's native
setTimeout function, which may be more appropriate for certain use
cases.
Not sure if that is what you mean though.