TowArrayPrint.js

/*
What is the optimal way to print values of 2 arrays alternately? (every 5 sec)
  * Items in both arrays could change at any given moment
  * update to each array needs to be applied imminently
  * if array is empty, it will not print any value (and move to the other array)

So if you start with following arrays 
  var arr0 = ['1','2','3']
  var arr1 = ['a','b','c']
It would start printing
  -> 1 (5sec)
  -> a (5sec)
  -> 2 (5sec)
  -> b (5sec)
But if arr1 updates to following after printing 'b'
  var arr1 = ['a','b','e','z']
Then it would continue printing
 . (a)
 . (2)
 . (b)
  -> 3 (5sec)
  -> e (5sec)
  -> 1 (5sec)
  -> z (5sec)

--------
Background :
I am making sideshow application that displays text message and images (alternating every 5 seconds)
Messages and Images to be displayed are updated from UI and saved as arrays in localStorage
(for actual application console.log(array[n]) part is replaced with DOM manipulation )
* I'm limited to use localStorage as data storege
--------

Following code is what I currently have, and doing what I want the program to do.
BUT here is what I am not feeling good about...
- I feel like its too much if statements. 
- Checking localStorage every time print() is called seems not optimal.
  - maybe create some flag when localStorage is updated?
  - or is it not that big of a deal?
- Currently when an array is empty, it will do nothing for 5sec till print() is called again.
  - having empty array is a rare case, but I would still like to move to the other array imminently
*/

var arr0 = ['1','2','3','4','5','6','7','8','9','10']; // default val for arr0
var arr1 = ['a','b','c']; // default val for arr1
var state = 0; //state  0 : arr0's turn to print   state 1 : arr1's turn to print 
var p0 = 0; // pointer for arr0
var p1 = 0; // pointer for arr1

// DATA UPDATE
// Get contents of localStorage and assign to arrays.
// If array is undefined, assign empty array.
function updateArrays(){
  arr0 = JSON.parse(window.localStorage.arr0 || '[]');
  arr1 = JSON.parse(window.localStorage.arr1 || '[]');
}

// PRINT
// called every 5sec by setInterval
function print(){

  // update arr0 and arr1 to match with contents of localStorage
  updateArrays();

  // arr0's turn to print
  if(state === 0){
    state = 1;

    // if array is empty, return.
    if(arr0.length < 1){ return; }

    // if pointer is at the end (thus return false), reset to 0
    if(!arr0[p0]){ p0 = 0 }

    // finally print value and increment pointer
    console.log(arr0[p0])
    p0++;
    return;
  }

  // arr1's turn to print
  state = 0;
  if(arr1.length < 1){ return; }
  if(!arr1[p1]){ p1 = 0}
  console.log(arr1[p1])
  p1++;
  return;
}

window.setInterval(function(){ print(); }, 5000);


/*
functions for UI event
every time user hit 'update arr0' or 'update arr1' button, 
function smiler to following are called to update content of localStorage
value is always [array]
*/
function updateArr0(){
  window.localStorage.arr0 = JSON.stringify(document.getElementById('arr0').value)
}
function updateArr1(){
  window.localStorage.arr1 = JSON.stringify(document.getElementById('arr1').value)
}

@Fishrock123 ~~ is two operations; and | 0 is what asm.js adopted as a 'type hint' that something is a 32-bit int and not a double float.