0

I'm designing a simple SPA.
It shall use angular.js.
It shall not use any server side code.
The web app shall show a number of slides in a carousel.
The slides shall be placed in the img/slides subdir of the app root dir. The slides shall be named 1.jpg, 2.jpg, ... N.jpg.
The number of the slides should be detected by the app at runtime, since the slides will be possibly uploaded or removed after the code is deployed.

This is the code I'm using to count the slides available on the server where the app is run:

  // detect the number of available slides
  var slidesCount = 0;
  var slidesMax = 100;
  for (var i = 0; i < slidesMax; i++) {
    var url = 'img/slides/' + (1 + i) + '.jpg';
    var request = new XMLHttpRequest();
    request.open('HEAD', url, false);
    request.send();
    if (request.status === 200) {
      slidesCount++;
    } else {
      break;
    }
  }

This code just works, but I'm not completely satisfied with it, since - on the first not found slide - it spits an error on console:

HEAD http://localhost/spa/img/slides/7.jpg 404 (Not Found)

I did try to use a try - catch block around open(); send(), with no success...

So the question: can you suggest some way to avoid the error to be thrown to console, OR, an altogether different algorithm?

MarcoS
  • 17,323
  • 24
  • 96
  • 174
  • This is not an exact duplicate as this question asks for an *altogether different algorithm* which I would like to suggest – le_m May 31 '16 at 14:27
  • I would love to hear about suggestions... Expecially if you are giving an *async* solution... If you can't answer your question here, since I see this question is closed as duplicate, tell me, I'll post a new question, explicitly asking for an async solution... – MarcoS May 31 '16 at 14:31
  • I recommend the following search strategy for the last image and thus for finding N: 1. Successively check the existence of image i^2, 2. Perform binary search between last found image and the first non-existing image. This algorithm only sends ~log(n) HTTP requests and is faster than the linear search if you implement it respecting the async nature of the HTTP requests via e.g. a request pool etc. – le_m May 31 '16 at 14:34
  • To 1. You would stop sending requests searching for the first nonexisting image as soon as one of your many async requests finds a non-existing image. – le_m May 31 '16 at 14:37
  • A real-world scenario however would probably add a configuration file to the server detailing the number of slides :) but I am sure you have your reasons – le_m May 31 '16 at 14:39
  • I don't see how I could apply a binary search logic to this problem: if I know image '256.jpg' does not exist, what do I know about the existence of image '255.jpg'? And more, how to apply such algorithm using async requests? – MarcoS May 31 '16 at 14:49
  • Let's assume your last image is 20. your would send e.g. requests 2,4,8,16,32,64,... Let's assume you get replies in the order 4,2,16,32,8,64,... As soon as you get the negative reply of 32, you can cancel any request > 32 and wait for the requests < 32 to finish. The same goes for the positive reply of 4, which tells you that you can cancel all requests < 4. Repeat until you have two consecutive answers, one positive and one negative, in our example 16 and 32. Now you would perform the binary search: send our requests 24,20,28 and so on (splitting the search intervals) until you get a reply – le_m May 31 '16 at 15:01
  • I see, thanks... A bit more complex than I thought... More, the images in this case will not have 'holes' (if I find image 4, I know I have also 1, 2, 3...). – MarcoS May 31 '16 at 15:04
  • right, this search strategy will fail if an intermediary image is missing. – le_m May 31 '16 at 15:06
  • Yes, right. Thanks. – MarcoS May 31 '16 at 15:07

0 Answers0