We Keep Coding

How run javascript script immediately after dom tree is loaded to avoid the user from seeing the "single buffering" effect?

Premise: I need to apply changes trough JavaScript because the free platform on which my site is based does not allow changes to some parts of the template, so I can't insert the scripts in the source through the tag, but I can insert them in the script administration panel provided by the platform.
The script put in the panel are normally called up before the building of the DOM tree, so I have to insert the scripts in the $(function) to force the call at the end of the dom tree building, but in this way the function is called after the page has been drawn and the user first sees the old page and then the new page generating a "single buffering" effect.
Summarize:
1 - browser loading page and display it
2 - browser loading image and display it
3 - browser execute script and display changes
Quite often the point two take about 1 seconds or more so the old page is displayed for that time.
Can I force javascript to run code between point one and point two, so that point three become point two, and point two become point three?
I try:
$(function) {}
$(window).onload() {}
$(document).ready() {}
document.addEventListener('DOMContentLoaded', function() {});
Nothing of these works as I want.
Thank you in advance for help.

Solution found:
// add 'timer' function which will be called once every millisecond
var step = setInterval(step, 1);
function step() {
// verify if element is loaded
if (document.getElementById('*element-id*')) {
// add code here
// stop function call
window.clearInterval(step);
}
}
This work very well for me.

Need help understanding javascript code/jquery

So apparently the following can be used to automate linkedin steps of unfollowing a contact. I tried to run this code in the Chrome Console, and I'm not sure if it works. So I need help from someone who knows Javascript and JQuery to understand what this does, and then I can modify it to make it work.
var buttons = $("button"),
interval = setInterval(function(){
var btn = $('.is-following');
console.log("Clicking:", btn);
btn.click();
if (buttons.length === 0) {
clearInterval(interval);
}
}, 1000);
PS: The linkedin page that lets to unfollow your contacts is below. Login, and then navigate to the below.
https://www.linkedin.com/mynetwork/invite-connect/connections/

First, it selects all the buttons and stores them on the variable buttons ($("TAG") will select elements with the tag TAG). Then, it creates an interval that will be stored in the variable interval (bad practice, btw, because it isn't using "var" to declare the variable, so, it's a global variable, that should be avoided... but it's necessary to declare it as global in order to use clearInterval) that will execute the function inside the setInterval function call every second (1000 ms). That function will get all the elements that have the class "is-following" and will store them on the variable btn. Then, it will log the... buttons? After that, it will execute the click event on all of those buttons. Finally it will check if the amount of buttons are 0. If true, it'll stop the interval.

Meteor Collection.find() blocks the entire application during working

I try to display a loading alert on Meteor with modal package during loading of data.
'change .filterPieChart': function(evt){
Modal.show('loadingModal');
/* a little bit of work */
var data = MyCollection.find().fetch(); // takes 3 or 4 seconds
/* lot of work */
Modal.hide('loadingModal');
}
Normally, the alert is displayed at the beginning of the function, and disappears at the end. But here, the alert appears only after the loading time of the MyCollection.find(), and then disappears just behind. How to display it at the beginning of the function ??
I tried to replace Modal.show with reactive variable, and the result is the same, the changing value of reactive variable is detect at the end of the function.

From what you describe, what probably happens is that the JS engine is busy doing your computation (searching through the collection), and indeed blocks the UI, whether your other reactive variable has already been detected or not.
A simple workaround would be to give some time for the UI to show your modal by delaying the collection search (or any other intensive computation), typically with a setTimeout:
Modal.show('loadingModal');
setTimeout(function () {
/* a little bit of work */
var data = MyCollection.find().fetch(); // takes 3 or 4 seconds
/* lot of work */
Modal.hide('loadingModal');
}, 500); // delay in ms
A more complex approach could be to decrease the delay to the bare minimum by using requestAnimationFrame

I think you need to use template level subscription + reactiveVar. It is more the meteor way and your code looks consistent. As i can see you do some additional work ( retrive some data ) on the change event. Make sense to actually really retrive the data on the event instead of simulation this.
Template.TemplateName.onCreated(function () {
this.subsVar = new RelativeVar();
this.autorun( () => {
let subsVar = this.subsVar.get();
this.subscribe('publicationsName', this.subsVar);
})
})
Template.TemplateName.events({
'change .filterPieChart': function(evt){
Template.instance().collectionDate.subsVar.set('value');
Modal.show('loadingModal');
MyCollection.find().fetch();
Modal.hide('loadingModal');
}
})
Please pay attention that i didn't test this code. And you need to use the es6 arrow function.

Javascript. Var++ not properly working

I've been learning JS for a few days. stackoverflow was a great help. However I came up with a problem I cannot even determine or describe (since I'm new to this).
I've built an < audio >-based mp3 player.
You need to see /try it by yourself. (sorry)
Please check JS code here - ctrl-f 'STACKoverflow' in it - AntonFrolov.net/music.php
Here is the actions you need to perform to see where the problem is (I've put these to website too).
Click on track #2 - You will notice an alert('Track #' +ID); = [Track #2]
There is a player in the bottom-right corner - Set track progress to 98% so it ends.
(ID++), You are sent to the track#3 . alert('Track #' +ID); = [Track #3]. good.
Repeat step 2.
(ID++), You should be sent to the track#4. ... PROBLEM Events:
5a. alert('Track #' +ID); = [Track #3].
5b. Track#3 starts playing. AGAIN. then you instantly receive next .. alert
5c. alert('Track #' +ID); = [Track #4].
5d. Track#4 starts playing. that's what I expected but without events 5a-5b.
This will continue if you keep doing the steps.
However the JS code is here:
function FuncPlay(ID,Rnd){
alert('Track #'+ID);
if (Rnd==0){
$('.liActive').removeClass('liActive');
$('#'+ID).next().addClass('liActive');
// Set track Data
$('audio').attr('id','audioNor');
$('audio').attr('src',$('.liActive').attr('rel'));
// Play
var player = $('.tbd').get(0);
player.play();
$('#pause').removeClass('hi');
ID++;
$(player).bind('ended', function () {
if (ID <= <?php echo $am ?>){FuncPlay(ID, 0);}
else {alert('"...End of the list."' );}
});
}
}
I have completely no idea how to deal with this. Thank you for your patience.

I think the problem is that you're binding the ended-handler multiple times to your player. Everytime FuncPlay gets called, it will be attached another time.
So for example if then track 5 starts, it will first call the handler for track 3, then track 4 and finally track 5.
What you could do is creating a global variable called ID and bind to the handler only when document ready is called. In the handler-function you refer to this global variable.
Or, before calling $(player).bind, remove all bindings to the players ended event.
Also, I would recommend using .on(), .bind() is just still available for backwards compatibility. The method to unbind the event-handler is .off()/.unbind().

You don't unbind you 'ended' event listener. Is is called 2 times on the second song end, 3 times on the third, etc.

Trigger JQuery function after quicktime reaches end

I read the Apple documentation on how to make use of the DOM events for Quicktime. I am having trouble making it work within JQuery... I'd like to make use of the fade() function - that's why within JQuery.
Here's the code:
function onm_remove_intro(){
$('#basecamp_intro_div').fadeOut(4000);
}; //end function onm_remove_intro()
function onm_add_event_listener(object, event, handlerfunction, capture_bool){
if ( document.addEventListener )
{object.addEventListener(event, handlerfunction, capture_bool)}
else
// IE
{object.attachEvent('on' + event, handlerfunction)};
}; //end function onm_add_event_listener(object, event, handlerfunction, capture_bool)
var listener_object = $('#intro_movie_embed');
onm_add_event_listener(listener_object, 'qt_ended', onm_remove_intro, false);
Unless I comment out the last line, the execution of onm_add_event_listener, any JQuery code after it does not run. So clearly I am doing something illegal, but cannot figure out what.
I verified that the listener object variable does return a valid DOM object in Safari, which is where I am testing for now. Not concerned with IE yet.
Here is a reference to Apple's documentation on the subject:
http://developer.apple.com/library/mac/#documentation/QuickTime/Conceptual/QTScripting_JavaScript/bQTScripting_JavaScri_Document/QuickTimeandJavaScri.html%23//apple_ref/doc/uid/TP40001526-CH001-SW5
Hoping it's something really simple and that I am just too bleary eyed at this point to see it... All I want to do, if it isn't evident from the code example is to fade out the video after it reaches the end.
Thanks in advance,
M

Without having any experience with quicktime DOM events it seems to me the listener_object should be the DOM element, instead of the jquery object.
Have you tried:
var listener_object = $('#intro_movie_embed').get(0);