This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How to tell browser to stay on current window
Can I delay the onclick action of an element. I have an element which calls a function in the onclick event. How do I delay the call to that function? I want to tell the browser to stop two seconds before performing the onclick action.
The element looks like this.
<div id="id01" class="channel" onclick="load_window('http://www.ewtn.com')"><a>EWTN.com</a></div><br/>EWTN television network</div>
If I put a setTimeout inside the load_window function, the browser treats the window.open as a popup and stops it. So I want to put the question a different way. Is there a way to tell the browser to wait before doing the onclick? In the .click of that element I have code that performs other functions.
$('.channel').click(function() {
$(this).addClass("selected");
show_layer();
setInterval("refresh_caption()",300000);
});
I am looking to delay the call to load_window() while still having that action be treated by the browser as a user action.
The quick and dirty way is to make a new function that wraps a timeout for the load_window call, and set that new function as the onclick value.
function channel_click(){
// anon wrapper function, 2 second delay
setTimeout( function () {
load_window('http://www.ewtn.com');
} , 2000 );
}
then
<div id="id01" class="channel" onclick="channel_click()"><a>EWTN.com</a></div><br/>EWTN television network</div>
no idea what your load_window function is actually doing, so I can't say what happens after the 2 seconds are up.
Again, this is specific to the example you provided. If you need a more generic approach, you'll have to provide more information.
No, there is no viable way to delay execution of the currently running javascript thread without hanging the browser for that period of time.
You could loop in a tight loop until 2 seconds elapsed and then do your popup thing, but that would be a horrible user experience and some browsers may even abort your script because of its non-responsiveness. I would NOT recommend this at all. It is a bad design.
Executing some code at a later time is normally done via setTimeout(), but you've already said you don't want to use that for popup reasons.
If you care to explain what problem you're really trying to solve, perhaps we can offer some other way to approach the problem.
Related
The problem here is that whenever I open the page. the link is automatically opens, sometimes it opens 3 new windows without clicking the div
<div onTouchTap={window.open(a)}> TEST </div>
can you please provide your input? or suggest any other alternatives. by the way I am using ReactJS
You need to provide a function to the onTouchTap, you are actually executing window.open(a).
You could do something like:
<div onTouchTap={() => window.open(a)}> TEST </div>
I describe a similar solution and some of the caveats in another answer:
https://stackoverflow.com/a/37771414/350933
It's very common mistake. There must be a function () => {window.open(a)} or window.open.bind(null, a) as onTouchTap handler, but you are trying to put function call here, so it calls every time when your div rendering
I am working on chrome extension for facebook. If you use facebook, you know that when you scroll down to the bottom of the news feed/timeline/profile it shows more posts. The extension actually adds a button beside the "like" button. So I need to check if there are more posts to add that button to.
Right now to check if the page has been modified, I use setInterval(function(){},2000).
I want to run a function when the user clicks the button. But this function doesn't work if I put it outside (or even inside) setInterval() – The Koder just now edit
How can I check if the webpage has been modified WITHOUT using a loop?
Example:
$(document).ready(function(){
window.setInterval(function(){
$(".UIActionLinks").find(".dot").css('display','none');
$(".UIActionLinks").find(".taheles_link").css('display','none');
$(".miniActionList").find(".dot").css('display','none');
$(".miniActionList").find(".taheles_link").css('display','none');
//only this function doesn't work:
$(".taheles_link").click(function(){
$(".taheles_default_message").hide();
$(".taheles_saving_message").show();
});
//end
$(".like_link").after('<span class="dot"> · </span><button class="taheles_link stat_elem as_link" title="תגיד תכל´ס" type="submit" name="taheles" onclick="apply_taheles()" data-ft="{"tn":">","type":22}"><span class="taheles_default_message">תכל´ס</span><span class="taheles_saving_message">לא תכלס</span></button>');
$(".taheles_saving_message").hide();
}, 2000);
});
In the future, this extension will use AJAX, so setInterval() can make even more problems for me.
If I understand correctly you want to get a notification when the page's DOM changes. And you want to do this without using the setInterval() function.
As your problem lies within the attaching event handlers to elements that are created after the page has loaded, you might be interested in checking out the jquery.live event attachment technique. I think it will solve your issue.
In general you want the page to throw a mutation event. There is a mutation event spec that might be what you're looking for. Here are some links that might be useful.
http://tobiasz123.wordpress.com/2009/01/19/utilizing-mutation-events-for-automatic-and-persistent-event-attaching/
Detect element content changes with jQuery
$(document).ready(function(){
setInterval('fun()',5000);
fun();
});
function fun()
{
alert(11)
}
I have a page that automatically refreshes content via Ajax. I want this to be subtle so I do not want to display my loading gif during automatic page refreshed. So I did something like this with my getPosts function (unnecessary code cut out for succinctness)
function getPosts(image)
{
//loading icon while getPosts
if (image)
{
$("#postcontainer").bind("ajaxStart", function(){
$(this).html("<center><img src='ajax-loader.gif' /></center>");
});
} //... ajax call, etc. don't worry about syntax errors, they aren't in real code
I know the center tag is deprecated, just a shameless shortcut.
And then I will set the interval like setInterval(function() { getPosts(false); }, 10000);
Therefore my automated calls will not trigger the image to display
All my manual refreshes will then call it like this getPosts(true);
You can (probably) see the bug in action at my personal site
The problem is, the setInterval function seems to use the image bool from the latest function call. So it does not display the image at first during automated calls, but after I click a manual refresh, it starts showing the image during each call.
How can I combat this?
Thanks for anyone who views/posts this topic! I hope this question becomes a good reference to others.
The problem is that once you've bound your "ajaxStart" handler to the container it will execute on every ajax call for that container. That is, the first time you call it with getPosts(true) it will create the binding. The next time you call it with getPosts(false) it doesn't go down that if path but the binding still exists so when you do your ajax call the handler still executes - and the handler doesn't doesn't have any conditional logic. (Actually, I believe you'll end up with multiple bindings on the "ajaxStart" event, one created every time you call getPosts(true), but they're probably not noticable since they all just do the same thing overwriting the same html.)
Why not do something like this:
function getPosts(image) {
if (image) {
$("#postcontainer").html("<center><img src='ajax-loader.gif' /></center>");
}
// Actual ajax call here
}
setInterval(function() { getPosts(false); }, 10000);
Because after the first manual refresh you have attached a event handler "ajaxstart" which is to show the image when a ajax call starts. Now this event handler is there even in case you call the function with image = false. It will get triggered on all ajax calls.
What you need to do is something like:
$("#postcontainer").bind("ajaxStart", function(){
$(this).html("<center><img src='ajax-loader.gif' /></center>")
//Remove event handler
$(this).unbind("ajaxStart");
});
I have two pages namely Parent.xhtml(controls the layout) and Child.xhtml(displays the content). Child page is included in the Parent page by using <iframe> tag.
I need to implement an onload functionality by using javascript. Before that, I want to know in which order the javascript functions will execute?
Will the Parent page js function execute first? or Child page js function will execute first?
Awaiting your answers.! Thanks in advance
According to a previous answer, browsers might not wait for iframes to load before firing the onload event on the parent window. You can't make assumptions on which one will complete first - there's the possibility of a race condition going on there, so either one could finish first.
One solution might be to write a function that waits until it's been called a certain number of times before executing:
var runs = 0;
function onLoad() {
if (++runs < 2) return;
// put code to execute once both have loaded
}
Then in HTML:
<body onload="onLoad();">
.....
<iframe onload="onLoad();">
Alternatively, set the URL of the iframe in the onload handler of the parent window.
I have a page that on a certain action makes an iframe visible and fills the iframe with some HTML (say for example a multi-select box and an ok button).
The OK button on the iframe has the onClick method defined kinda like this:
onClick="parent.hideIFrame();parent.processMultiSelectBox();"
When User clicks OK on the iframe (presumably after playing with the multi-select box), I'd like the iFrame to disappear immediately and then the selected values in the multi-select box can be processed. But this is not what's happening. The iFrame remains visible during the time the other function runs and disappears only after the second function finishes.
The hideIFrame function is pretty straightforward:
function hideIFrame() {
frmObj = document.all.iFrameID;
if(frmObj) {
frmObj.style.visibility = "hidden";
}
}
I've paraphrased the above function for clarity (removed some indicator variable assignments etc.)
The second function actually loops on all the options in the multi-select object and does stuff with it. This takes about a half a second and only after that is done, does my iFrame disappear. It is a little bothersome to see it linger for half a second when I click ok.
My question is whether there is some way I can make the darn thing disappear faster. Speaking in "classical C" lingo, is there a "flush" for the change in visibility to happen immediately?
I did notice that if I put an "alert" as the first line in my second function, the iframe disappears immediately but now it is the OK on the alert box that lingers for the time it takes the second function to finish.
Thanks.
EDIT: Based on DDaviesBrackett's answer, this is what I ended up doing:
The onclick in the iframe changed to:
onClick="parent.hideAndProcessMultiSelectBox(parm1, parm2);"
The hideAndProcessMultiSelectBox function was defined as:
function hideAndProcessMultiSelectBox( parm1, parm2 ) {
hideIFrame();
setTimeout( function() { processMultiSelectBox( parm1, parm2 ); }, 0 );
}
Voila.. no delay..
You've gotten to the root of your problem already; document reflow doesn't happen until the current JS thread is done (so as not to repaint lots of times during JS execution). You need to return control to the browser before doing your expensive processing.
The simplest way to achieve that, though it doesn't make for obvious code in the slightest, is to call processMultiSelectBox in a setTimeout with a delay of 0:
onClick="parent.hideIFrame();parent.setTimeout(parent.processMultiSelectBox,0);"
If you need to pass parameters to the thing you're setting a timeout on, you have two options: set a timeout on a string that evals to Javascript (bad, bad, very bad, horrible) or define an anonymous function that calls the one you're interested in:
onClick="parent.hideIFrame();parent.setTimeout(function(){parent.processMultiSelectBox(foo, bar, 'baz');},0);"
RSolberg's response may also help, though there's a difference between visibility:hidden and display:none.