Last active
May 24, 2017 13:33
-
-
Save kosamari/2ca1ea6e92758966a00b to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
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 || '[]'); | |
} | |
// 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) | |
} |
Awesome! Nice to see it come together so tidy!
@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.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Thank you !
So I changed array update to
editor --> (iterator, localStorage)
per @aredridel's suggestion.For iterator, I ended up using modulo operator to select between sets, then using array.shift() and array.push() to loop through each element (like @behcet's suggestion).
@aredridel's suggestion provided perfectly continuous iteration (and that's what I was aiming first), but realized when you update the set from UI, users think the old set is flashed out and expect the app to "start over from the 1st element of new set", so shift and push worked better for this case.
also I saw
| 0
and~~
and>>0
for the first time. awesome !