Develop Reference

I am leaking memory in my JavaScript with my custom preload function, but I don't know where

I created a photo app. It runs in the browser, and what it does is this:
it runs every minute, goes to the server to get a random filename (from all the files on the server) with randomfilename.php, then load and places that in a hidden image named 'next' (image.php?filename=).
Then the next minute, it puts the image from the hidden 'next' image in the image called 'current', (the image called 'current' is what the user sees) and then it loads another image from the server in 'next'. And so on.
The reason I first preload the image in the 'next' image, is that it runs on a Raspberry Pi and it's not so quick in loading the image. When it takes 2 or 3 seconds, it doesn't look so smooth.
So now it has almost a minute to get the image and put it in 'next', and then instant it loads in 'current' (what the user sees) with this code: document.getElementById('current').src = document.getElementById('next').src;
This works....until the browser kept crashing, and when loading it from my pc and inspect memory, I saw the browser memory go up and up, and I understand why the limited memory Pi would crash.
So first I deleted all console.logs, didn't help.
Then I commented the code to load the image in next, and the code to copy the image from 'next' to 'current'. So the script was still getting the filename and the image from server, but didn't do anything with it. And at this time the memory didn't go up.
So I am wondering, what am I doing wrong with my setup? Does it hold all images in memory, doesn't it free memory from the previous image when I load a new one in 'next' and in 'current'?
Do I have to say (pseudocode) document.getElementById('current').clear() or remove it from DOM and then create a new one?
All help and tips on my code is welcome.
EDIT 1: the memory usage:
I've created 3 snapshots in FireFox, at t=0, t=.5 hours and t = 7 hours, it's 3.1 , 4.85 and 3.55 MB. So not a lot.
The same moments, the memory usage of FireFox in the task manager: 450 Mb, 943 MB and 4902 MB. So this is quite a lot.
Could it be that all images are stored/cached/remembered in the tabpage?
$( document ).ready(function() {
var currentFileName = '';
var nextFileName = '';
var latestRetrievedFile = 'pending...';
setInterval( refreshAfbeelding , 60000 );
function refreshAfbeelding(){
setTimeout(function(){
document.getElementById('current').src = document.getElementById('next').src;
setTimeout(function(){
$( "#current" ).fadeTo( 1500 , 1, function() {
d = new Date().toISOString();
$.get( "randomfilename.php?id=" + d, function( data ) {
data = $.trim(data);
parts = data.split("|");
document.getElementById('next').src = "image.php?filename=" + parts[1];
latestRetrievedFile = parts[0];
});
});
}, 0);
}, 1500);
$( "#current" ).fadeTo( 1500 , 0, function() {
});
};
});
Edit 2
Even with the simplest code, without fade en nifty timeouts, it still creates the same amount of memory, in the Windows process
var currentFileName = '';
var nextFileName = '';
var latestRetrievedFile = 'pending...';
var currentFileName = '/twee.jpg';
var nextFileName = '/een.jpg';
function refreshAfbeelding() {
document.getElementById('current').src = document.getElementById('next').src;
document.getElementById("imagename").innerHTML = latestRetrievedFile;
var d = new Date().toISOString();
$.get( "randomfilename.php?id=" + d, function( data ) {
var dataTrimmed = $.trim(data);
var parts = dataTrimmed.split("|");
document.getElementById('next').src = "image.php?filename=" + parts[1];
latestRetrievedFile = parts[0];
});
}
setInterval( refreshAfbeelding , 60000 );

How can I make a button clickable if countdown har reached 0?

I have a countdown until marvel movies have their premier and would like to have a button "Book Tickets" that is unclickable when counting down, and then make it clickable when the countdown has reached 0. How do I do that?
I have tried to make if-statements, but something is wrong.
var clock = $('.clock').FlipClock(new Date("July 5, 2019 00:00:00"),{
clockFace: 'DailyCounter',
countdown: true
});
You can see the countdown I currently have on: http://www.student.city.ac.uk/~aczc972/
The callback seems to work well with alerts, even though the alert comes at second 1 and not 0, although I just need to find a way of changing the behaviour of the button.
This is the new code
var clock = $('.clock3').FlipClock(new Date("April 10, 2019 12:27:00"), {
clockFace: 'DailyCounter',
countdown: true,
callbacks: {
stop: function() {
alert("Hello! I am an alert box!!");
}
}
});

It's hard to figure what code to put in for your button since there isn't one available on your website. Here's a potential solution: http://jsfiddle.net/kdyzxLbt/
var clock = $('.clock').FlipClock(new Date("July 5, 2019 00:00:00"),{
clockFace: 'DailyCounter',
countdown: true
});
setTimeout(function(){
checktime();
}, 1000);
function checktime(){
t = clock.getTime();
if(t<=0){
$('#myBtn').removeAttr('disabled');
}
setTimeout(function(){
checktime();
}, 1000);
}
Basically it starts your clock and checks the time every second. If the time is less than or equal to 0 it enables your button.
Source: Countdown flipclock and reset after counting to zero

why don't you bind a click handler on clock2 flip-clock-wrapper and then simply exit the function if the current datetime is less than July 5, 2019 ?
$('#clock2').off().on('click', function () { your code here } )
or maybe just had a normal button and do the same logic in the click handler ?

setInterval on myDoughnut animation

I want to repeat the animation of the myDoughnut animation every 5 seconds. At the moment it only animates on page load.
<script>
var doughnutData = [
{
value: 80,
color:"#74cfae"
},
{
value : 20,
color : "#3c3c3c"
}
];
var myDoughnut = new Chart(document.getElementById("CSS3").getContext("2d")).Doughnut(doughnutData);
</script>
I have tried using
setInterval("Chart();", 500);
I am still learning Javascript so a little unsure as to if I am referencing the correct function and where to place the setInterval code.
The animation can be viewed at the bottom of this website: http://www.chartjs.org/
Many thanks for any guidance and direction!

You should pass a proper function to setInterval.
I looked for a way to replay the animation of Chart object but i couldn't find any directive in ChartJS documentation.
Here is how you function should look like:
setInterval(function () {
myDoughnut = new Chart(document.getElementById("CSS3").getContext("2d")).Doughnut(doughnutData);
}, 2000);
Here is working JSFiddle.

setInterval takes a function as parameter.
Try:
setInterval(function(){ Chart(); }, 500);

How can I permanently set the options of jquery.typer()?

I'm using Layervault's jquery.typer (https://github.com/layervault/jquery.typer.js), with a timeout function to delay it.
I'm trying to use their default formula on the page for setting the options permanently, but, if I either write:
setTimeout(function(){
$('[data-typer-targets]').typer();
}, 4500);
$.typer.options.typerInterval = 3500;
or
$.typer.options.typerInterval = 3500;
setTimeout(function(){
$('[data-typer-targets]').typer();
}, 4500);
The typer initializes, but the options don't remain in place; the typerInterval always reverts back to the default of 2000. If I hard code the change in jquery.typer.js source, the change is permanent. I'm thinking it might be a lack of understanding javascript sytax? Thanks for any help!

try:
$('[data-typer-targets]').typer({
typerInterval : 3500
});
do like:
setTimeout(function(){
$.typer.options.typerInterval = 3500;
$('[data-typer-targets]').typer();
}, 4500);

BigVideo Loop after n seconds

I need to the video after n seconds. Is there such parameter?
BV.show('video/video1.mov',
{ambient: false, doLoop: false, altSource: 'video/video1.ogv'});

Looking through the BigVideo page, you should be able to seek to the time you want through:
BV.getPlayer().currentTime(10) //10 seconds into the video.
you can also add an event when the video ends and seek back to the same time.
var player = BV.getPlayer();
var myFunc = function(){
player.currentTime(10);
};
player.addEvent("ended", myFunc);