Develop Reference

setTimeout and clearTimeout interruption

I'm trying to make like a drop alert queue.
So far i've achieved it. The problem comes when I try to implement interruptions.
Let's say that an offline event fires one alert, and before it end's it's timeout, online event fires. I want it to kill offline alert, and show online alert instead.
The thing is that timeout's aren't working as I expect them to, in that case.
Here's the Angular service that handles the alerts:
.factory('AlertDrop', ['$rootScope', '$q', function ($rootScope, $q) {
var timeout = 2000;
$rootScope.DropAlerts = [];
var hideonclick = false;
var listenerOn = false;
var t = this;
this.currentAlert = {};
var getColor = function (clase) {
switch (clase) {
case 'error':
return 'rgba(201,48,44,0.9)';
break;
case 'warning':
return 'rgba(240,173,78,0.9)'
break;
case 'success':
return 'rgba(68,157,68,0.9)'
break;
case 'info':
return 'rgba(49, 176, 213,0.9)'
break;
default:
console.log('Código de color incorrecto. Cargo color por defecto.');
return 'rgba(152,26,77,0.9)';
break;
}
};
this.requestTypes = [
{
type: 'offline',
class: 'error'
},
{
type: 'online',
class: 'success'
}
];
this.bgcolor = 'rgba(201,48,44,0.9)';
this.showAlert = function (params) {
this.currentAlert = params;
delete t.ctout;
t.ctout = {};
var deferred = $q.defer();
if (params.timeout) {
this.timeout = params.timeout
}
if (params.hideonclick) {
hideonclick = params.hideonclick;
}
if (params.class != '')
this.bgcolor = getColor(params.class);
if (params.class != '') {
$('.alertDrop').attr('style', 'background: ' + this.bgcolor + '; top:44px;');
} else {
$('.alertDrop').attr('style', 'top:44px;');
}
if (hideonclick) {
addListener(this.bgcolor);
}
$('.alertDrop').html(params.message);
t.ctout = setTimeout(function () {
timeoutDone();
}, this.timeout);
};
this.hideAlert = function (color) {
$('.alertDrop').css('top', '0');
rmListener();
};
var rmListener = function () {
if (listenerOn) {
$('.alertDrop').unbind('click');
}
};
var addListener = function (color) {
if (!listenerOn) {
// $('.alertDrop').on('click', t.hideAlert(color));
}
};
var timeoutDone = function(){
var deferred = $q.defer();
t.hideAlert(this.bgcolor);
var tt = setTimeout(function(){
t.changeStatus(false);
deferred.resolve(true);
},2000); // 2 segundos, tiempo establecido en style.css
return deferred.promise;
};
var removeOnlines = function(){
$rootScope.DropAlerts = $rootScope.DropAlerts.filter(function(el){
return el.type != 'online';
});
};
var removeOfflines = function(){
$rootScope.DropAlerts = $rootScope.DropAlerts.filter(function(el){
return el.type != 'offline'
});
};
var interrupcion = function(params){
var load = true;
if(params.type == 'offline'){
removeOnlines(params);
load = false;
}else if(params.type == 'online'){
removeOfflines(params);
load = false;
}
if(load){
$rootScope.DropAlerts.push(params);
}else{
clearTimeout(t.ctout);
timeoutDone().then(function(){
t.showAlert(params);
});
}
};
this.checkPush = function(params){
var deferred = $q.defer();
if( $rootScope.AlertDropActive ){
if( params.type == this.currentAlert.type ){
clearTimeout(this.ctout);
setTimeout(function(){
timeoutDone();
},this.timeout)
}else{
interrupcion(params);
}
deferred.resolve(true);
}else{
$rootScope.DropAlerts.push(params);
deferred.resolve(true);
}
return deferred.promise;
};
this.pushAlert = function (params) {
this.checkPush(params);
if (!$rootScope.AlertDropActive) {
this.changeStatus(true);
var alert = $rootScope.DropAlerts.shift();
this.showAlert(alert);
}
};
this.changeStatus = function(v){
$rootScope.AlertDropActive = v;
if (!$rootScope.AlertDropActive && ( $rootScope.DropAlerts.length > 0 )) {
this.changeStatus(true);
var alert = $rootScope.DropAlerts.shift();
this.showAlert(alert);
}
};
return {
showAlert: this.showAlert,
hideAlert: this.hideAlert,
pushAlert: this.pushAlert,
changeStatus: this.changeStatus,
currentAlert: this.currentAlert,
checkPush: this.checkPush
};
}]);
So, when I fire interrupcion function, only in the case that connection is reestablished or lost, I need to stop the current timeout and, once the alert is hidden, show the new event.
I'm displaying this on a div, with a transition of 2 seconds.
Any ideas?

Actually the error wasn't on the code i posted, but when I called pushAlert.
I added a timeout in order to try to simulate fast event changes, and that was messing around with the timeouts.

detect when 2 calendar values changed

I am making a financial report where user choose 2 dates search_date1 and search_date2, and then a monthly report is generated.
I created first a daily report with only one calendar and when it is changed I apply some AJAX script to it and it works correctly:
var myApp = {};
myApp.search_date = "";
document.getElementById('search_date').onchange = function (e) {
if (this.value != myApp.search_date) {
var d = $("#search_date").val();
$.ajax({
...
});
}
}
Now I can't know how to detect if both calendars are changed to apply AJAX script according to their values.
EDIT
Is it correct to do the following:
var myApp = {};
myApp.search_date1 = "";
myApp.search_date2 = "";
document.getElementById('search_date1').onchange = function (e) {
if (this.value != myApp.search_date1) {
var d1 = $("#search_date1").val();
document.getElementById('search_date2').onchange = function (e) {
if (this.value != myApp.search_date2) {
var d2 = $("#search_date2").val();
$.ajax({
...
})
}
});
}
});

try this:
var temp = {
from: null,
to: null
}
document.getElementById('from').onchange = function(e){
temp.from = e.target.value;
goAjax();
}
document.getElementById('to').onchange = function(e){
temp.to = e.target.value;
goAjax();
}
function goAjax(){
if(temp.from && temp.to && new Date(temp.from) < new Date(temp.to)){
//do ajax call
console.log('valid')
}
}
<input type="date" id='from'/>
<br>
<input type="date" id='to'/>

I would have captured the change event for both elements :
$("#search_date1, #search_date2").on('change',function(){
var d1 = $("#search_date1").val();
var d2 = $("#search_date2").val();
$.ajax({...});
});

What you do in your edit may work, but it would be better (and easier) do something like this
var myApp = {};
myApp.original_search_date1 = $("#search_date1").val();
myApp.original_search_date2 = $("#search_date2").val();
myApp.search_date1 = $("#search_date1").val();
myApp.search_date2 = $("#search_date2").val();
document.getElementById('search_date1').onchange = function (e) {
if ($("#search_date1").val() != myApp.search_date1) {
myApp.search_date1 = $("#search_date1").val();
sendAjax();
}
});
document.getElementById('search_date2').onchange = function (e) {
if ($("#search_date2").val() != myApp.search_date2) {
myApp.search_date2 = $("#search_date2").val();
sendAjax();
}
});
function sendAjax() {
if (myApp.original_search_date1 !== myApp.search_date1 &&
myApp.original_search_date2 !== myApp.search_date2) {
$.ajax({
...
});
}
}

Cant you just set a variable to check if its been changed with true/false then run the script if both variables are true.
Something like,
var searchOneToggled = false,
searchTwoToggled = false;
$('#search_date_one').on('input', function() {
searchOneToggled = true;
runYourFunction();
});
$('#search_date_two').on('input', function() {
searchTwoToggled = true;
runYourFunction();
});
function runYourFunction() {
if(searchOneToggled === true && searchTwoToggled === true) {
alert('hello world');
}
}

Cordova media, how to get callback for loop playing?

I have following Angular JS service which is accessing to the cordova media plugin.
MediaSrv.loadMedia(filePath, mediaSuccess, null, status).then(function(media, status, test, status1){
media.play({ numberOfLoops: 999 });
media.setVolume(volume);
$scope.selectedSounds[index].state = 1;
$scope.selectedSounds[index].mediaInstance = media;
$scope.someSoundsArePlaying = true;
});
I would like to ask, how can i do loop playing of the selected file which can be stopped after passing mediaInstance to stop function?
I tried mediaSuccess Callback and status CallBack but it does not work properly.
Service is following:
'use strict';
angular.module('MaxRelax')
.factory('MediaSrv', function($q, $ionicPlatform, $window){
var service = {
loadMedia: loadMedia,
getStatusMessage: getStatusMessage,
getErrorMessage: getErrorMessage
};
function loadMedia(src, onError, onStatus, onStop){
var defer = $q.defer();
$ionicPlatform.ready(function(){
var mediaSuccess = function(){
if(onStop){onStop();}
};
var mediaError = function(err){
_logError(src, err);
if(onError){onError(err);}
};
var mediaStatus = function(status){
console.log(status);
if(onStatus){onStatus(status);}
};
if($ionicPlatform.is('android')){src = '/android_asset/www/' + src;}
defer.resolve(new $window.Media(src, mediaSuccess, mediaError, mediaStatus));
});
return defer.promise;
}
function _logError(src, err){
console.error('media error', {
code: err.code,
message: getErrorMessage(err.code)
});
}
function getStatusMessage(status){
if(status === 0){return 'Media.MEDIA_NONE';}
else if(status === 1){return 'Media.MEDIA_STARTING';}
else if(status === 2){return 'Media.MEDIA_RUNNING';}
else if(status === 3){return 'Media.MEDIA_PAUSED';}
else if(status === 4){return 'Media.MEDIA_STOPPED';}
else {return 'Unknown status <'+status+'>';}
}
function getErrorMessage(code){
if(code === 1){return 'MediaError.MEDIA_ERR_ABORTED';}
else if(code === 2){return 'MediaError.MEDIA_ERR_NETWORK';}
else if(code === 3){return 'MediaError.MEDIA_ERR_DECODE';}
else if(code === 4){return 'MediaError.MEDIA_ERR_NONE_SUPPORTED';}
else {return 'Unknown code <'+code+'>';}
}
return service;
});
Many, many thanks for any help.
EDIT:
Playing of the item is processed by the following method:
$scope.playSelectedItem = function(index) {
try {
var fileName = $scope.selectedSounds[index].file;
var volume = $scope.selectedSounds[index].defaultVolume;
var filePath = "sounds/" +fileName+".mp3";
console.log(filePath);
MediaSrv.loadMedia(
filePath,
function onError(err){ console.log('onError', MediaSrv.getErrorMessage(err)); },
function onStatus(status){ console.log('onStatus', MediaSrv.getStatusMessage(status)); },
function onStop(){ console.log('onStop'); myMedia.play(); }
).then(function(media){
myMedia = media;
media.play({ numberOfLoops: 999 });
media.setVolume(volume);
$scope.selectedSounds[index].state = 1;
$scope.selectedSounds[index].mediaInstance = media;
$scope.someSoundsArePlaying = true;
});
} catch(e) {
alert(JSON.stringify(e));
console.log(e);
$scope.showAlert("Error", "Error during the playing item");
}
};
Stopping:
$scope.stopSelectedItem = function(index) {
try {
var leng = 0;
if($scope.selectedSounds[index].state == 1) {
var mediaInstance = $scope.selectedSounds[index].mediaInstance;
mediaInstance.stop();
$scope.selectedSounds[index].state = 0;
$scope.selectedSounds[index].mediaInstance = "";
myMedia.stop();
}
angular.forEach($scope.selectedSounds, function loadMedia(selectedSound, idx){
if($scope.selectedSounds[idx].state == 1) {
leng ++;
}
});
if(leng <= 0) {
$scope.someSoundsArePlaying = false;
console.log("No sound are playing");
}
if(leng > 0) {
$scope.someSoundsArePlaying = true;
console.log("Some sound are playing");
}
console.log("Leng is:");
console.log(leng);
} catch(e) {
alert(JSON.stringify(e));
console.log(e);
$scope.showAlert("Error", "Cannot stop playing of item");
}
};
EDIT2:
I finally solved it using storing myMedia instance in the simple array.
$scope.playSelectedItem = function(index) {
try {
var fileName = $scope.selectedSounds[index].file;
var volume = $scope.selectedSounds[index].defaultVolume;
var filePath = "sounds/" +fileName+".mp3";
console.log(filePath);
MediaSrv.loadMedia(
filePath,
function onError(err){ console.log('onError', MediaSrv.getErrorMessage(err)); },
function onStatus(status){ console.log('onStatus', MediaSrv.getStatusMessage(status)); },
function onStop(){
console.log('onStop');
if($scope.selectedSounds[index].state == 1) {
console.log('For index ' +index+' is state '+$scope.selectedSounds[index].state);
myMedia[index].play();
}
}
).then(function(media){
myMedia[index] = media;
media.play({ numberOfLoops: 999 });
media.setVolume(volume);
$scope.selectedSounds[index].state = 1;
$scope.selectedSounds[index].mediaInstance = media;
$scope.someSoundsArePlaying = true;
});
} catch(e) {
alert(JSON.stringify(e));
console.log(e);
$scope.showAlert("Error", "Error during the playing item");
}
};

I'm pleased that you find my angular service usefull.
In your sample you seems to mess up with parameter order :
MediaSrv.loadMedia(filePath, mediaSuccess, null, status) vs
function loadMedia(src, onError, onStatus, onStop)
BTW, play parameter numberOfLoops does not seems to work (at least on my nexus4). If you want to loop, you will need to call play() every time the mp3 ends.
Here is a short example :
var myMedia = null;
MediaSrv.loadMedia(
'sounds/1023.mp3',
function onError(err){ console.log('onError', MediaSrv.getErrorMessage(err)); },
function onStatus(status){ console.log('onStatus', MediaSrv.getStatusMessage(status)); },
function onStop(){ console.log('onError'); myMedia.play(); },
).then(function(media){
myMedia = media;
myMedia.play();
});
With this code, your sound should play, forever... To control when your sound should stop, I suggest you to add a control parameter, like this :
var myMedia = null;
var shouldPlay = false;
MediaSrv.loadMedia(
'sounds/1023.mp3',
function onError(err){ console.log('onError', MediaSrv.getErrorMessage(err)); },
function onStatus(status){ console.log('onStatus', MediaSrv.getStatusMessage(status)); },
function onStop(){ console.log('onError'); if(shouldPlay){myMedia.play();} },
).then(function(media){
myMedia = media;
});
function playStart(){
shouldPlay = true;
myMedia.play();
}
function playStop(){
shouldPlay = false;
myMedia.stop();
}
To play multiples files in a loop, you have to store all media references and play them successively. See there :
var shouldPlay = false;
var playingMedia = null;
var soundFiles = ['sounds/1.mp3', 'sounds/2.mp3', 'sounds/3.mp3'];
var mediaInstances = [];
var onPlayStop = function(){
if(shouldPlay){
if(playingMedia === null){
playingMedia = 0;
} else {
playingMedia = (playingMedia+1) % mediaInstances.length;
}
mediaInstances[playingMedia].play();
}
};
for(var i in soundFiles){
MediaSrv.loadMedia(soundFiles[i], null, null, onPlayStop).then(function(media){
mediaInstances.push(media);
});
}
function playStart(){
shouldPlay = true;
onPlayStop();
}
function playStop(){
shouldPlay = false;
mediaInstances[playingMedia].stop();
}
I hope this will helps :D

Nested functions within an object javascript

I am trying to add an additional function to my object. I am getting an error of undefined. I am confused. I want to be able to enter this line and have the object function execute.
var Button = System.Windows.Forms.Control.TabControl();
Button.TabPages.Add();
This is the code I have so far:
System.Windows = {};
System.Windows.Forms={};
System.Windows.Forms.Control={
TabControl: function () {
this.Node;
var self=this;
this._ID="id test";
TabPages= {
//
Add: function () {
Debug.WriteLine("ADD ID:"+self._ID);
}
}
this.Focus = function () {
this.Node.focus();
}
this.NodeCreate = function () {
Debug.WriteLine("node created");
var btn = document.createElement("button");
btn.type = "button";
btn.name = this._Name;
this.Node = btn;
}
this.NodeCreate();
}
}
Somehow I think I am confusing the scopes or something. Any help would be appreciated. Thanks.

This runs without errors, but doesn't physically add the button to the page because you never added it to the document. I assume that's the next step.
var System = {
Windows : {
Forms : {
Control : {
TabControl : function ()
{
var self=this;
this.Node = null;
this._ID="id test";
this.TabPages = {
//
Add: function () {
console.log("ADD ID:"+self._ID);
}
};
this.Focus = function () {
this.Node.focus();
};
this.NodeCreate = function () {
console.log("node created");
var btn = document.createElement("button");
btn.type = "button";
btn.name = this._Name;
self.Node = btn;
return self.Node;
}
self.NodeCreate();
return this;
}
}
}
}
},
Button = new System.Windows.Forms.Control.TabControl();
Button.TabPages.Add();

Javascript callback managment

I'm having trouble with designing a class which exposes its actions through callbacks. Yes my approach works for me but also seems too complex.
To illustrate the problem I've drawn the following picture. I hope it is useful for you to understand the class/model.
In my approach, I use some arrays holding user defined callback functions.
....
rocket.prototype.on = function(eventName, userFunction) {
this.callbacks[eventName].push(userFunction);
}
rocket.prototype.beforeLunch = function(){
userFunctions = this.callbacks['beforeLunch']
for(var i in userFunctions)
userFunctions[i](); // calling the user function
}
rocket.prototype.lunch = function() {
this.beforeLunch();
...
}
....
var myRocket = new Rocket();
myRocket.on('beforeLunch', function() {
// do some work
console.log('the newspaper guys are taking pictures of the rocket');
});
myRocket.on('beforeLunch', function() {
// do some work
console.log('some engineers are making last checks ');
});
I'm wondering what the most used approach is. I guess I could use promises or other libraries to make this implementation more understandable. In this slide using callbacks is considered evil. http://www.slideshare.net/TrevorBurnham/sane-async-patterns
So, should I use a library such as promise or continue and enhance my approach?

var Rocket = function () {
this.timer = null;
this.velocity = 200;
this.heightMoon = 5000;
this.goingToMoon = true;
this.rocketStatus = {
velocity: null,
height: 0,
status: null
};
this.listener = {
};
}
Rocket.prototype.report = function () {
for (var i in this.rocketStatus) {
console.log(this.rocketStatus[i]);
};
};
Rocket.prototype.on = function (name,cb) {
if (this.listener[name]){
this.listener[name].push(cb);
}else{
this.listener[name] = new Array(cb);
}
};
Rocket.prototype.initListener = function (name) {
if (this.listener[name]) {
for (var i = 0; i < this.listener[name].length; i++) {
this.listener[name][i]();
}
return true;
}else{
return false;
};
}
Rocket.prototype.launch = function () {
this.initListener("beforeLaunch");
this.rocketStatus.status = "Launching";
this.move();
this.initListener("afterLaunch");
}
Rocket.prototype.move = function () {
var that = this;
that.initListener("beforeMove");
if (that.goingToMoon) {
that.rocketStatus.height += that.velocity;
}else{
that.rocketStatus.height -= that.velocity;
};
that.rocketStatus.velocity = that.velocity;
if (that.velocity != 0) {
that.rocketStatus.status = "moving";
}else{
that.rocketStatus.status = "not moving";
};
if (that.velocity >= 600){
that.crash();
return;
}
if (that.rocketStatus.height == 2000 && that.goingToMoon)
that.leaveModules();
if (that.rocketStatus.height == that.heightMoon)
that.landToMoon();
if (that.rocketStatus.height == 0 && !that.goingToMoon){
that.landToEarth();
return;
}
that.report();
that.initListener("afterMove");
that.timer = setTimeout(function () {
that.move();
},1000)
}
Rocket.prototype.stop = function () {
clearTimeout(this.timer);
this.initListener("beforeStop");
this.velocity = 0;
this.rocketStatus.status = "Stopped";
console.log(this.rocketStatus.status)
this.initListener("afterStop");
return true;
}
Rocket.prototype.crash = function () {
this.initListener("beforeCrash");
this.rocketStatus.status = "Crashed!";
this.report();
this.stop();
this.initListener("afterCrash");
}
Rocket.prototype.leaveModules = function () {
this.initListener("beforeModules");
this.rocketStatus.status = "Leaving Modules";
this.initListener("afterModules");
}
Rocket.prototype.landToMoon = function () {
this.initListener("beforeLandToMoon");
this.rocketStatus.status = "Landing to Moon";
this.goingToMoon = false;
this.initListener("afterLandToMoon");
}
Rocket.prototype.landToEarth = function () {
this.initListener("beforeLandToEarth");
this.stop();
this.rocketStatus.status = "Landing to Earth";
this.initListener("afterLandToEarth");
}
Rocket.prototype.relaunch = function () {
this.initListener("beforeRelaunch");
this.timer = null;
this.velocity = 200;
this.heightMoon = 5000;
this.goingToMoon = true;
this.rocketStatus = {
velocity: 200,
height: 0,
status: "relaunch"
};
this.launch();
this.initListener("afterRelaunch");
}
init;
var rocket = new Rocket();
rocket.on("afterLaunch", function () {console.log("launch1")})
rocket.on("afterLandToMoon", function () {console.log("land1")})
rocket.on("beforeLandToEarth", function () {console.log("land2")})
rocket.on("afterMove", function () {console.log("move1")})
rocket.on("beforeLaunch", function () {console.log("launch2")})
rocket.launch();
You can add any function before or after any event.
This is my solution for this kinda problem. I am not using any special methods anything. I was just wonder is there any good practise for this like problems. I dig some promise,deferred but i just can't able to to this. Any ideas ?