How do I stop a function with another function?

JavaScript
1

I have an issue in my function and really need your exceptional brain on this.

I need to create a function to stop looking for the next slide and not give me a error message that the asset is not found.

The condition will be created inside the last function below.

I have 6 assets in my folder.

I want to avoid this: GET file:///Users/ferfas/Desktop/1.33_1024x768/initialFrames/frame_7.jpg net::ERR_FILE_NOT_FOUND

Any help will be great.

Thanks in advance.

These are the functions:

var pictureIndex = 1;
var baseUrl = "initialFrames/";
var image_url = undefined;
var timer = setInterval(next, 2500);

var newImage = new Image();
newImage.onload = imageFound;
newImage.onerror = imageNotFound;

function next()
{
image_url = baseUrl + 'frame_' + pictureIndex + '.jpg';
tryLoadImage(image_url);
}

function tryLoadImage(url) {
newImage.src=url;
}

function imageFound() {
document.getElementById("backInit").src = image_url;
pictureIndex++;
}

function imageNotFound() {

// perform some function to stop calling next()
clearInterval(timer);
}
2

Hey, so you’re wanting to display these six images one after another at an interval of 2.5 seconds. What should happen when the final image is encountered?

Also, do you know how many images you have ahead of time?

3

Hi Pullo,

I have 6 images in my folder and after the function finds the 6 images and display it with the interval of 2.5secs, I want the function to stop as it continues to look for a next image and giving me the error that the 7th image is not found.

4

Can you just not hardcode the amount of images?

Here’s a simple example. This assumes that there are 4 images titled IMG_1.jpg, IMG_2.jpg, IMG_3.jpg, IMG_4.jpg in the same folder as this script:

var pictureIndex = 1;

function displayImage() {
  var newImage = new Image();
  newImage.src = "IMG_" + pictureIndex + ".jpg"
  newImage.onload = function(){
    document.body.append(newImage);
    pictureIndex++;
    if(pictureIndex < 5){
      setTimeout(displayImage, 2500)
    }
  }
}

displayImage();

It sounds like you’re making a slider of sorts, in which case another option to consider, would be to position the images one on top of the other, then show and hide them by altering their opacity.

2 Likes
5 
var baseUrl = "initialFrames/";
var i=1;
setInterval(function(){ 
  if(i==7){
    i=1;
  }
  var image_url = baseUrl + 'frame_' + i + '.jpg';           
  document.getElementById("backInit").src = image_url;
   i++; 
},2500);
1 Like
6

Hi guys,

I like all your suggestions, but the aim is to drop a new image or delete an image from the assets folder without having the error message.
The slideshow should run until the last image doesn’t matter how many images are in there and when finished, jump to the first image as the last function does.
I could hard code it, but the I believe there is a way to make it happen without getting the error message.

7

Try to be less complex at your code.A good define variable and setting their values it helps you to saving time, fatigue and memory. I suggest you to create an array with all images url values inside and make a loop inside it.You can erase, or adding new images or change the series of the images dynamically via this array.

8

JavaScript running in a browser doesn’t have this kind of access to the file system.

1 Like
9

yeah, that’s the thing about JS. If somehow there is a way to find the number of images first like using “length” and displaying it one by one. That would be amazing.

I know this is not common, but I’m dealing with no coding people and need to minimize the process.

10

You could make an Ajax call to a script running on the server and have it return the number of images in the folder.

11

Hi Pullo, that would be the ideal, but the issue is made to create online banners and platforms like Sizmek do not accept php or ajax to be uploaded.
It’s need to be just pure Javascript. It there is no way to do it, I will run a script locally that change the boolean value of the variables to false and disable the function. Thank you.

12

AJAX itself is pure JavaScript. The requested server script is a different matter, though.

13

Thank you guys for all the answers. I believe you are right about the Ajax call. I just have no idea how do I do that. I’m reading about it, but can’t figure it out atm.

14

Try Googling “Ajax basics”.

Here’s a very simplistic implementation to get you going:

files.php:

<?php
$dir = "/path/to/dir";
$fi = new FilesystemIterator($dir, FilesystemIterator::SKIP_DOTS);
$fileCount = iterator_count($fi);
echo $fileCount;

index.html:

fetch('files.php').then((res) => {
  res.text().then( (text) => { 
    console.log(`There are ${text} files in the folder`); 
  })
});

This relies on files.php and index.html being in the same folder on the server.

15

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.