Reducing function name usage within function - javascript

When I search for a function name - it gets clumsy when I see plenty of function names as in the example. In large code base I waste my time when searching for how and from where a function has been called :
function do_something()
{
if (typeof do_something.flag == "undefined")
{
do_something.flag = true;
}
if (do_something.flag == null)
{
do_something.flag = true;
}
}
Here when I search for do_something so that I can look from where it is called instead I find plenty of lines consisting of do_something.flag1,do_something.flag2 and so on which isn't of any use in most of such searches. In large function I get plenty of such lines occupying search output.
I've another scenario. In (Netbeans) IDE I want to do Ctrl-F do_something function looking for where it is called in the file. Now I find pressing F3 within the function itself iterating over it's own lines containing something like do_something.var1=5 etc.
In short is there any way to reduce the function name usage within the function when creating object-global variables?
I've much longer functions but I'll give real example of medium level function causing this problem:
function slow_down_clicks(label, userfunc, timeinmsec)
{
console.log("slow_down_clicks=" + label);
if (typeof slow_down_clicks.myobj == UNDEFINED)
{
slow_down_clicks.myobj = {};
}
if (typeof slow_down_clicks.myobj[label] == UNDEFINED)
{
slow_down_clicks.myobj[label] = {
inqueue: false,
lastclickedtime: 0,
login_post_error_count: 0
};
}
var myfunc = function ()
{
console.log("Executing the user func");
slow_down_clicks.myobj[label].inqueue = false;
slow_down_clicks.myobj[label].lastclickedtime = new Date().getTime();
userfunc();
}
console.log("Due to error in home.aspx reloading it", ++slow_down_clicks.myobj[label].login_post_error_count);
if (slow_down_clicks.myobj[label].inqueue == false)
{
var diff = new Date().getTime() - slow_down_clicks.myobj[label].lastclickedtime;
console.log("diff=", diff, timeinmsec);
if (diff > timeinmsec)
{
myfunc(); //click login
}
else
{
console.log("queuing the request after:", timeinmsec - diff);
slow_down_clicks.myobj[label].inqueue = true;
setTimeout(function ()
{
console.log("called myfunc babalatec");
myfunc();
}, timeinmsec - diff);
}
}
else
{
console.log("Discarding this request...");
}
}

I think you can just define the fields as normal variables and put your code in its own file. Then you can just refer to the variables by its name inside your function because they are within the function's closure. The variables will not be accessible outside because you limit them in its own file.
like:
let flag = false
function doSomething () {
if (!flag) {
flag = true
}
....
}
Put the above code snippet in a separate file and import the function when you want to use it.

Related

Terminate a function whenever it is executed - Javascript

How do I stop a function from further execution ? Answers to my this question didn't fulfill my need of stopping/terminating a function from further execution.
I have this kind of hierarchy of Constructor functions :
//First Constructor function
function Foo() {
this.foo1 = async function() {
alert("Foo 1 hs bee called");
return true;
}
this.foo2 = async function() {
alert("Foo 2 hs bee called");
return true;
}
}
//Second Constructor function
function Bar() {
var f = new Foo(),
_this = this;
f.foo1().then(function() {
f.foo2().then(function() {
_this.bar1();
})
})
this.bar1 = function() {
alert("Bar 1 hs bee called");
_this.bar2();
}
this.bar2 = function() {
alert("Bar 2 hs bee called");
}
}
exports.module = {
Bar
}
I have exported the second function as a module, and used that in another file in this way :
//Imported Module
const myModule = require("./algorithm");
//Initiating the Bar() constructor
var x = new myModule.Bar();
This is how it works, but to make it more clear, all the work is done by the Bar() constructor, which hits the Foo() constructor for getting the data.
I hit the Bar() constructor when a button is clicked, but at the same time, when all these functions starts working, I want to terminate it any time, using another button on the same page. Let's say one button will initiate the functions and the other will stop the initiated functions, and this is my problem I can't go through.
I came up with a solution, as #Jared Smith mentioned in the comments, the only thing I have done is to add a Flag which was, TERMINATE_FUNCTION = false. Whenever the stop button is clicked, the TERMINATE_FUNCTION is set to true and on each functions in Foo() constructor it's been checked whether the TERMINATE_FUNCTION === true or not, both in the beginning and return time of the functions, and there it stop the function :
The code is :
//Boolean variable
TERMINATE_FUNCTION = false;
//Listen to event occured
event.on("stopScrapping", function(b) {
TERMINATE_FUNCTION = b;
});
//First Constructor function
function Foo() {
if (TERMINATE_FUNCTION) return;
this.foo1 = async function() {
alert("Foo 1 hs bee called");
if (!TERMINATE_FUNCTION) {
return true;
} else {
return "SCRAPPER_STOPPED";
}
}
this.foo2 = async function() {
if (TERMINATE_FUNCTION) return;
alert("Foo 2 hs bee called");
if (!TERMINATE_FUNCTION) {
return true;
} else {
return "SCRAPPER_STOPPED";
}
}
}
So far it seems goal is to control one NodeJS-based processing(running infinite loop) from completely different process/request(initiating by clicking button in browser).
There are different ways to implement inter-process communication(that is how it's named). One of them is node-ipc
Completely different approach could be moving this continuous operation to some queue manager. This way you might get additional abilities like failproof execution(so you can continue process exactly from point where it broke) or transparent parallelization.

Check if the function was made

So basically i need to check if the est_wont_show was made/fulfilled/executed.
function est_wont_show() {
var HideThis, estpgt_id;
estpgt_id = $(this).attr("estpgt_id");
//Saving in DOM
HideThis = $("#estpgt_" + estpgt_id).detach();
HideThis = $("#estpt_tr_for_" + estpgt_id).detach();
if (document.body.getElementsByTagName(HideThis)) {
//Check if element is detached
alert("Element is in DOM");
}
}
Something in this way(this function is tied up to button)
function TEST_ALERT() {
if () {
//check if function was made
alert('hello');
} else {
alert('NO-2');
}
}
He should check because in the end there will be 2 things. Like if the elements ARE in DOM, then he will delete them, if they are not, then he will bring them back.
You can use a global scoped variable to know if it has been executed.
// We can use a flag to see if the function got executed
let est_wont_show_execution_flag = false;
function est_wont_show() {
// Do something ...
est_wont_show_execution_flag = true;
}
function TEST_ALERT() {
// Did est_wont_show has been executed ?
if (est_wont_show_execution_flag) {
console.log('TEST_ALERT : est_wont_show has been executed');
return;
}
console.log('TEST_ALERT : est_wont_show hasn\'t been executed');
}
TEST_ALERT();
est_wont_show();
TEST_ALERT();
You can use typeof operator to see if any function is available by the given name
function TEST_ALERT() {
if (typeof est_wont_show === "function") {
//check if function was made
alert('hello');
} else {
alert('NO-2');
}
}
If the function is not created typeof est_wont_show will be "undefined"

best way to toggle between functions in javascript?

I see different topics about the toggle function in jquery, but what is now really the best way to toggle between functions?
Is there maybe some way to do it so i don't have to garbage collect all my toggle scripts?
Some of the examples are:
var first=true;
function toggle() {
if(first) {
first= false;
// function 1
}
else {
first=true;
// function 2
}
}
And
var first=true;
function toggle() {
if(first) {
// function 1
}
else {
// function 2
}
first = !first;
}
And
var first=true;
function toggle() {
(first) ? function_1() : function_2();
first != first;
}
function function_1(){}
function function_2(){}
return an new function
var foo = (function(){
var condition
, body
body = function () {
if(condition){
//thing here
} else {
//other things here
}
}
return body
}())`
Best really depends on the criteria your application demands. This might not be the best way to this is certainly a cute way to do it:
function toggler(a, b) {
var current;
return function() {
current = current === a ? b : a;
current();
}
}
var myToggle = toggler(function_1, function_2);
myToggle(); // executes function_1
myToggle(); // executes function_2
myToggle(); // executes function_1
It's an old question but i'd like to contribute too..
Sometimes in large project i have allot of toggle scripts and use global variables to determine if it is toggled or not. So those variables needs to garbage collect for organizing variables, like if i maybe use the same variable name somehow or things like that
You could try something like this..: (using your first example)
function toggle() {
var self = arguments.callee;
if (self.first === true) {
self.first = false;
// function 1
}
else {
self.first = true;
// function 2
}
}
Without a global variable. I just added the property first to the function scope.
This way can be used the same property name for other toggle functions too.
Warning: arguments.callee is forbidden in 'strict mode'
Otherwise you may directly assign the first property to the function using directly the function name
function toggle() {
if (toggle.first === true) {
toggle.first = false;
// function 1
}
else {
toggle.first = true;
// function 2
}
}

calling the same function multiple times while clicking

I have a function which accepts a string and outputs it one character at a time with a delay. The event occurs when the user clicks a link or button. The problem is that if the user clicks a link and then another before the first one is done, they both run at the same time and output to the screen. It becomes jumbled up.
ex:
string1 : "i like pie very much"
string1 : "so does the next guy"
output : i sloi kdeo epse .... and so on.
Anyone know a method to fix this?
I think I need a way to check if the function is being processed already, then wait till it is done before starting the next.
Place both functions inside an object (because globals are bad), add a variable to the object which knows if a function is executing, and check the variable, like this:
var ns = {
isExecuting:false,
func1: function(){
if (this.isExecuting) { return; }
this.isExecuting = true;
//do stuff 1
this.isExecuting = false;
},
func2: function(){
if (this.isExecuting) { return; }
this.isExecuting = true;
//do stuff 2
this.isExecuting = false;
}
}
and for extra elegance:
var ns = {
isExecuting:false,
executeConditionally:function(action){
if (this.isExecuting) { return; }
this.isExecuting = true;
action();
this.isExecuting = false;
}
func1: function(){
this.executeConditionally(function(){
//stuff
})
},
func2: function(){
this.executeConditionally(function(){
//stuff
})
}
}
add a variable globally or in scope outside the method called IsProcessing and set it to true the first time the method is called, on the method you can then just check if (IsProcessing) return false;
All you need to do is set a variable that indicates whether the function is running:
var isRunning = false;
$('a').click(function({
if(isRunning == false){
isRunning = true;
///Do stuff
isRunning = false;
}
else{
return false;
}
});
Don't you want all the clicks to be taken into account, but in order ?
If so, I suggest you separate streams between adding a click to process, and consuming clicks
:
the html :
<a class="example" href="javascript:void(0)" onclick="delayPushLine();">i like pie very much</a><br/>
<a class="example" href="javascript:void(0)" onclick="delayPushLine();">so does the next guy</a>
<div class="writeThere"></div>
and the javascript (using jQuery a bit)
var charDisplayDelay = 50; // the time between each char display
var displayDelay = 2000; // the time before a click is handled
var lines = [];
var lineIdx = 0, pos = 0;
function delayPushLine(e) {
if (!e) {
e = window.event
}
setTimeout(function() { lines.push(e.srcElement.innerText); }, displayDelay);
}
function showLines () {
if (lines.length > lineIdx) {
if (pos < lines[lineIdx].length) {
$(".writeThere").append(lines[lineIdx].substr(pos,1));
pos++;
} else {
pos = 0;
lineIdx++;
$(".writeThere").append("<br/>");
}
}
}
setInterval("showLines()", charDisplayDelay);
http://jsfiddle.net/kD4JL/1/

How to disable a click event handler for particular time?

Only JavaScript, No jquery.
Code goes like:
window.onload = addListeners;
function addListeners(){
for(var i = 0 ; i < document.getElementsByClassName('arrow').length; i++){
if(window.addEventListener){
document.getElementsByClassName('arrow') [i].addEventListener( 'click', func , false);
}else{
document.getElementById('arrow') [i].attachEvent('onclick' , func);
}
}
}
function func(){
//Takes exactly 5 seconds to execute
}
Now, I want to disable the 'click' for 5 seconds when the function 'func()' is running. And, then after the 'func()' is completely executed, the click should again be enabled automatically.
How to do this only using JavaScript?
Rather than disable the click event, check a variable to see if its currently running.
var funcRunning = false;
function func(){
if (funcRunning) return;
funcRunning = true;
//Function logic here
funcRunning = false;
return //whatever
}
This way your not guessing the function will take 5 seconds to run, the function will simply not execute its logic until its completed its current run.
EDIT: As #NULL has suggested, a better method would be to store the boolean variable on the function itself to prevent global pollution:
function func(){
if (func.IsRunning) return;
func.IsRunning = true;
//Function logic here
func.IsRunning = false;
return //whatever
}
To elaborate my comments on Curts answer:
When declaring the function func you can do two things:
function func() {
if ( !func.isRunning ) {
func.isRunning = true;
/* logic goes here */
func.isRunning = false;
}
}
Or you can make a closure and store isRunning inside it:
var func = (function() {
var isRunning = false;
return function() {
if ( !isRunning ) {
isRunning = true;
/* logic goes here */
isRunning = false;
}
};
})();
The second example can makes a private variable only accessible inside the closure.
Its mostly about a design pattern some developers doesn't like to store variables directly on functions like in example one. The only difference is that if someone chooses to set func.isRunning = true the function cannot run again and therefore not reset itself.
If your function is asynchronous (it sends ajax request, as far as I understood), you'd better create a "success" callback for that request and handle funcRunning flag there.
Here is an example:
var funcRunning = false;
function func() {
if (funcRunning) {
return;
}
funcRunning = true;
var xmlhttp = new XmlHttpRequest();
xmlhttp.open('GET', '/xhr/test.html', true);
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4) {
if (xmlhttp.status == 200) {
// do something.
funcRunning = false;
}
}
};
}
P.S. Current example is not the most correct in creating XmlHttpRequest instance (not crossbrowser). It is shown only as an example.

Categories