We Keep Coding

Global variable created as setInterval function not accessible from within functions

I am setting an interval in the global scope so it can be cleared and restarted within functions. However, when I call it from within a function, it seems to be undefined. My understanding (and I've just done a ton of reading) is that Javascript variables defined outside of functions (var this = '' OR var this;) are global and accessible from anywhere else in the code. Every time I check my (allegedly) global variable from within a function, it is inaccessible.
As far as defining my global variable, I have tried a few options and none have worked. I have tried setting the variable but not giving it a value:
var mainTimeout;
I have tried setting it AND giving it an initial value:
var mainTimeout='x';
I have tried setting it as the actual time interval that it will eventually be:
var mainTimeout = setInterval(function(){setTimeClckState('default');}, 15000);
Regardless of which option I choose, I try calling it later from within a function like this:
$(".timeClckControls input[type=button]").click(function(){
if(mainTimeout){clearInterval(mainTimeout)}else{console.log('no timeout var set');};
});
Without fail, I always get console logged "no timeout var set". So it is never being recognized from within the function, even though I defined my variable with global scope. The result of this is that my time interval just stacks and it constantly triggers after the function is triggered a few times. Please help, I am out of ideas!
Full Code:
var mainTimeout = setInterval(function(){setTimeClckState('default');}, 15000);
$(".timeClckControls input[type=button]").click(function(){
if(!($(this).val()=='IN')&&!($(this).val()=='OUT')){
// IF CLEAR BUTTON, SET TIME CLOCK TO DEFAULT
if($(this).val()=="CL"){
setTimeClckState('default');
// IF BUTTON IS 4TH CHARACTER
}else if($('#empIDTxt').val().length==3){
$('#empIDTxt').val($('#empIDTxt').val()+$(this).val());
$('.timeClckControls .btn-primary').prop('disabled',true);
getEmpData();
}else{
$('#empIDTxt').val($('#empIDTxt').val()+$(this).val());
}
}
if(mainTimeout){clearInterval(mainTimeout)}else{console.log('no timeout var set');};
var mainTimeout = setInterval(function(){setTimeClckState('default');}, 15000);
});
function setTimeClckState(state){
switch(state){
case "default":
$('.timeClckControls input[type=text]').val('');
$('.timeClckControls input[type=button]').prop('disabled',false);
$('#statusDiv .alert').removeClass('alert-warning');
$('#statusDiv .alert').removeClass('alert-success');
$('#statusDiv .alert').addClass('alert-secondary');
$('#statusDiv .alert').html(' ');
$('#clockInOutBtn').removeClass('btn-warning');
$('#clockInOutBtn').removeClass('btn-success');
$('#clockInOutBtn').addClass('btn-secondary');
$('#clockInOutBtn').prop('disabled',true);
$('#clockInOutBtn').val('CLK');
$('#clearBtn').removeClass('btn-warning');
$('#clearBtn').removeClass('btn-success');
$('#clearBtn').addClass('btn-secondary');
$('#clearBtn').prop('disabled',true);
break;
case 'clockedIn':
$('#clearBtn').prop('disabled',false);
$('#clockInOutBtn').prop('disabled',false);
$('#clockInOutBtn').removeClass('btn-success');
$('#clockInOutBtn').addClass('btn-warning');
$('#clockInOutBtn').val('OUT');
break;
case 'clockedOut':
$('#clearBtn').prop('disabled',false);
$('#clockInOutBtn').prop('disabled',false);
$('#clockInOutBtn').addClass('btn-success');
$('#clockInOutBtn').removeClass('btn-warning');
$('#clockInOutBtn').val('IN');
break;
}
}

Okay I figured it out. Thanks to #Mischa, helped me realize what was happening. Problem was that I'm resetting the variable from within a function each time. So the variable actually ends up not having global scope. Googled "how to define global variable from within function". Turns out the best way is to set "window.myVar" from inside function. Ended up just making one function to stop and restart the interval:
function stopStartClearInt(){
if(window.mainTimeout){clearInterval(window.mainTimeout)}else{console.log('no timeout var set');};
window.mainTimeout = setInterval(function(){
setTimeClckState('default');
console.log('Interval check');
}, 5000);
}
I can run this from literally anywhere in my script and it will work!

Your code should work fine:
function setTimeClckState(str) {
console.log(str);
}
var mainTimeout = setInterval(function(){setTimeClckState('default');}, 500);
$(".timeClckControls input[type=button]").click(function(){
if(mainTimeout){
clearInterval(mainTimeout)
} else {
/**
* The return value of setInterval is just a unique id you use to pass back to
* clearInterval. It's not a structured object with any additional information,
* nor does it get set to null when you call clearTimeout. So even its cleared
* it will never be falsy
*/
console.log('no timeout var set');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="timeClckControls">
<input type="button" value="click me" />
</div>

Function is being called when page loads instead of on click event

I am trying to get this function to be called via click event, but for some reason it is being called when page loads. I am completely baffled on why my function is reacting this way.
Here is my function
var registerTab = function(panel){
var active = 'off';
if($('#'+panel).css('left') <= '0'){
$('#'+panel).animate({left: '0'});
active = 'on';
} else {
$('#'+panel).animate({left: '-380px'});
}
};
$(function() {
tabRegister.on('click', registerTab('sidePanel'));
});
The weird thing is if i call it when i remove the passed variable and hard-code the selector in it works fine which again makes no since to me. Please any help would be very helpful and save me some hair.

registerTab('sidePanel')
This call will cause the function to be called immediately. I think what you really want is this:
tabRegister.on('click', function () {
registerTab('sidePanel')
});

JS-Error: function is not known ("is not a function")

Other people had this problem also, but I was not able to transfer the answers to my problem. So I just ask :-)
I got this code, using a star-rating-plugin ("rateit"):
<div class="rateit"></div>
Now I want to call a function after clicking on the div. When I just use
$(document).on('rated', '.rateit', function() { alert("aha"); });
this works, I get the alert. But when I call a function of the rateit-plugin with
$(document).on('rated', '.rateit', function() { ratingHelper.submit($(this).rateit('value'));
});
I get the error ".rateit is not a function". I get the same error when using
$('.rateit').bind('rated', function() { ratingHelper.submit($(this).rateit('value')); });
The function to call looks like
var ratingHelper = function(){
};
ratingHelper.prototype = {
submit: function(v){
...
Well I am new to JS/jQuery and totally helpless. I would appreciate any help very much. Thanks in advance!
EDIT
Oh man ... I had the jquery.js imported TWICE :-( sorry for bothering you and thanks for your help!!

$(document).on('event', 'element', callback);
event: name of event run
element: elements of trigger
callback: function run after trigger
In your case -> '.rateid' is class name in DOM, and in this -
$('.rateit').bind('rated', function() {}); you not pointing at the item

Processing.js doesn't allow external javascript bind in firefox

I'm trying to send data to a processing script. But for some reason the variable pjs below binds to the canvas "competence1" and enters the first if statement, but then the bindJavascript(this)-call returns error, but only in firefox. (works perfectly in chrome):
[pjs.bindJavascript is not a function]
var bound = false;
function initProcessing(){
var pjs = Processing.getInstanceById('competence1');
if (pjs != null) {
// Calling the processing code method
pjs.bindJavascript(this);
bound = true;
//Do some work
}
if(!bound) setTimeout(initProcessing, 250);
}
Environment: Mac OS X - Lion;
OBS! The bindJavascript(this)- method exists in the pde script loaded in the canvas-tag

By wrapping up all my script in a varable-map and by using the second way for setTimeout to be called i can follow each state and control the result.
So wrap it up-->
var ex = {
init : function(canId){
var canId = canId;
// check the if bound
// bind in this closure
// set new timer
}
}
setTimeout-->
setTimeout('ex.init("'+canId+'")', 2000);
and ofcourse add the parameter in so it can hold that value during it's own execution. So processing works just fine and i should use closure more often, that's the solution.

I had the same problem. I was using almost identical JS to you (which I got from the Pomax tutorial), and it was working fine. However, when I added the following preload directive (to load a backdrop), then suddenly my initProcessing function stopped working.
/* #pjs preload="metal_background.jpg"; */
The error message was the same: pjs.bindJavascript is not a function
On debugging, I could see that the pjs object did indeed not have a bindJavaScript function exposed, even though there is one declared in my PDE file.
It turns out this was purely down to timing... the preload had slowed down the initialisation of the processing object, so the second time round the 250ms loop, the pjs object existed, but didn't yet have its bindJavaScript function.
I am not 100% sure how Processing.js does this object construction, but in this case, a simple solution was just to check whether bindJavaScript actually was defined! I changed my code to the following:
var bound = false;
function initProcessing() {
var pjs = Processing.getInstanceById('mySketchId');
if(pjs != null) {
if(typeof(pjs.bindJavaScript) == "function") {
pjs.bindJavaScript(this);
bound = true;
}
}
if(!bound) setTimeout(initProcessing, 250);
}
After this it worked fine!

Javascript,calling child window function from opener doesn't work

I'm developing a web application that opens a popup using windows.open(..). I need to call a function on the opened window using the handle returned by "window.open", but I'm always getting the error message "addWindow.getMaskElements is not a function", as if it couldn't access the function declared on child window. This is the behavior in both IE and FF. My code looks like this:
function AddEmail(target,category)
{
if(addWindow == null)
{
currentCategory = category;
var left = getDialogPos(400,220)[0];
var top = getDialogPos(400,220)[1];
addWindow = window.open("adicionar_email.htm",null,"height=220px, width=400px, status=no, resizable=no");
addWindow.moveTo(left,top);
addWindow.getMaskElements ();
}
}
I've googled and read from different reliable sources and apparently this is supposed to work, however it doesn't.
One more thing, the functions in child window are declared in a separate .js file that is included in the adicionar_email.htm file. Does this make a difference? It shouldn't..
So, if anyone has ran into a similar problem, or has any idea of what I'm doing wrong, please, reply to this message.
Thanks in advance.
Kenia

The window creation is not a blocking operation; the script continues to execute while that window is opening and loading the HTML & javascript and parsing it.
If you were to add a link on your original page like this:
Test
You'd see it works. (I tried it just to be sure.)
**EDIT **
Someone else posted a workaround by calling an onload in the target document, here's another approach:
function AddEmail()
{
if(addWindow == null) {
addWindow = window.open("test2.html",null,"height=220px, width=400px, status=no, resizable=no");
}
if(!addWindow.myRemoteFunction) {
setTimeout(AddEmail,1000);
} else { addWindow.myRemoteFunction(); }
}
This keeps trying to call addWindow.myRemoteFunction every 1 second til it manages to sucessfully call it.

The problem is that window.open returns fairly quickly, the document that is requested and then any other items that that document may subsequently refer to will not yet have been loaded into the window.
Hence attempting to call this method so early will fail. You should attach a function to the opened window's load event and attempt to make you calls from that function.

The problem with the below one is :
When the javascript is being executed in the parent window, the child window is not loading. Hence, the invoking function from parent window is in the infinite loop and it is leading to crashing the window.
The window creation is not a blocking operation; the script continues
to execute while that window is opening and loading the HTML &
javascript and parsing it.
If you were to add a link on your original page like this:
Test
You'd see it works. (I tried it just to be sure.)
**EDIT **
Someone else posted a workaround by calling an onload in the target
document, here's another approach:
function AddEmail()
{
if(addWindow == null) {
addWindow = window.open("test2.html",null,"height=220px, width=400px, status=no, resizable=no");
}
if(!addWindow.myRemoteFunction) {
setTimeout(AddEmail,1000);
} else { addWindow.myRemoteFunction(); }
}
This keeps trying to call addWindow.myRemoteFunction every 1 second
til it manages to sucessfully call it.

You are calling the function immediately after opening the window; the page on the popup may not be loaded yet, so the function may not be defined at that point.