Develop Reference

Explain the function Middleware

Can anybody give me tutorial how this function is working i am not able to understand how this function is working. How this.go function actually working. Any Help would be appreciated. Thanks
var Middleware = function() {};
Middleware.prototype.use = function(fn) {
var self = this;
this.go = (function(stack) {
return function(next) {
stack.call(self, function() {
fn.call(self, next.bind(self));
});
}.bind(this);
})(this.go);
};
Middleware.prototype.go = function(next) {
next();
};
USAGE
var middleware = new Middleware();
middleware.use(function(next) {
var self = this;
setTimeout(function() {
self.hook1 = true;
console.log('a')
next();
}, 10);
});
middleware.use(function(next) {
var self = this;
setTimeout(function() {
self.hook2 = true;
console.log('b')
next();
}, 10);
});
var start = new Date();
middleware.go(function() {
console.log(this.hook1); // true
console.log(this.hook2); // true
console.log(new Date() - start); // around 20
});

The purpose of this code seems to be to build up a sequence of functions, which will then be run one after the other.
The go method's job is to run some code. If you've never called use, then go will run the specified code immediately, with no complications.
The use method lets you insert additional steps to be run. When you call use, the original go method is replaced with a new method. That new method will call the old go method, followed by your custom method. If use is called multiple times, this builds up a sequence of functions. The functions will be called in the order they were passed in to use. The next function starts running when the previous function calls next().
A lot of the complication of the code comes from making sure that the value of this stays what it's expected to be. If that wasn't a requirement, then use could be rewritten like this:
Middleware.prototype.use = function(fn) {
const oldGo = this.go;
this.go = next => oldGo(() => fn(next))
}

A function that takes a callback and creates a new version of the callback that can only be called once. Javascript

I trying to create a function, that takes another function as the argument, and creates a new version of the callback function that can only be called once. Subsequent calls will return the output if the initial call.
This is along the lines of recreating the Underscore .once method.
Here is what I have thus far. I have created a chargeCreditCard function. I want to create a new version of this function that can only be called once (chargeOnce). Explanation is appreciated. Thanks.
Edit. I want the once function to not rely on any code outside of the function to work (ie. an external counter variable).
var chargeCreditCard = function(num, price){
return num*price;
};
function once (func) {
var hasActionBeenCalled = false;
var call = function () {
if(!hasActionBeenCalled) {
hasActionBeenCalled = true;
func;
}
}
}
var chargeOnce = once(chargeCreditCard);
console.log(chargeOnce(2,3));
console.log(chargeOnce(4,5));

Your function once does not return anything, and your function call does not call anything. Make it
function once(func) {
var hasActionBeenCalled = false;
return function() {
if (!hasActionBeenCalled) {
hasActionBeenCalled = true;
return func.apply(this, arguments);
}
}
}
For garbage collection, I'd recommend to do
function once(func) {
var res;
return function() {
if (typeof func == "function") {
res = func.apply(this, arguments);
func = null; // unset func
}
return res;
}
}

Runtime error when executing simple closure in Javascript

Im new to JS and trying to learn. The spec requires the following:
Write a function that takes another function* as an argument and creates a version of the function that can only be called one time. Repeated calls to the modified function will have no effect, returning the value from the original call. How could you do this without using a closure? Is it even possible? How could you do this with a closure? *Note: This original input function should not have any parameters.
This is what I have:
var divide = function () {
var x = 2;
var y = 6;
return y/x;
}
var mainFunc = function (func) {
return func(){
return y/x + 1;
}
}
var output = mainFunc(divide);
console.log(divide());
console.log(output());
console.log(output());
I'm getting an "Unexpected token{" error at "return func(){" I don't quite understand what i'm doing wrong? Per the spec, I am passing divide() to mainFunc() and setting it to a reference variable output. I then call the divide() and output() multiple times to test if the closure works and that modified function only happens once. What am I missing or not understanding?
Thanks for the help.

Here you go:
function runonce(func) {
return (function(func) {
var ran = false;
var retval;
return function() {
if (!ran) {
ran = true;
retval = func();
}
return retval;
}
})(func);
}
function realfunction() {
console.log('really running');
return 5;
}
var realfunctionrunner = runonce(realfunction);
realfunctionrunner();
realfunctionrunner();
realfunctionrunner();
Study the code, the whole trick is a "self contained library" which result is returned from the runonce function

Noob javascript, why is this firing onload?

So I dont understand why the console logs 1 right away onload or something when i have one.onclick = alterIt(1) shouldn't it wait till i click one. Anyway, obviously I am not ver good at javascript, thanks for your help.
window.onload = initialize;
function initialize() {
if (1 == 1){
calculation();
}
}
function calculation() {
var one = document.getElementById('one');
one.onclick = alterIt(1);
}
function alterIt(x) {
console.log(x);
}

When you wrote:
one.onclick = alterIt(1);
...then you invoked the alterIt function and set the return value as the onclick handler. Instead, you wanted:
one.onclick = function(){ alterIt(1) };
// ...or better yet
one.addEventListener('click',function(){ alterIt(1) },false);

When the line one.onclick = alterIt(1); is executed, alterIt(1) is actually evaluated. What you want is to bind a function to one.onclick, which is only executed when the onclick event fires. You need something like
one.onclick = function() { alterIt(1) };
which doesn't bind the result of alterIt(1) to one.onclick, but rather the result of the function evaluation.

Wrap the function call like this so it doesn't fire until click:
window.onload = initialize;
function initialize() {
if (1 == 1){
calculation();
}
}
function calculation() {
var one = document.getElementById('one');
one.onclick = function(){ alterIt(1);};
}
function alterIt(x) {
console.log(x);
}
Example fiddle: http://jsfiddle.net/RkH6Q/

There are two ways that you could code to work around this issue:
//Anonymous Closures
one.onclick = function(){ alterIt(1); };
//Bind Closures
one.onclick = alertIt.bind(window, 1);
Note: Function.bind() is supported by all the browsers for a year. If you care about old browsers, anonymous closures is the way to go.

What is happening is that you are calling the alterIt function when you should just be passing it in. So remove the parenthesis like so:
one.onclick = alterIt;

How to determine if a function has been called without setting global variable

I am looking for a good technique to get away from what I am tempted to do: to set a global variable.
The first time someone runs a function by clicking a button it triggers an initial function to turn a few things into draggables. Later, if they click the button a second time I want to determine if the init function has been initialized, and if so to not call it again. I could easily do this by setting a global variable from the init function and then checking that variable from the click function, but I'm wondering how to do this without setting a global variable. I would really like an example of a way to do this.

You could add a property to the function:
function init() {
init.called = true;
}
init();
if(init.called) {
//stuff
}

While #Levi's answer ought to work just fine, I would like to present another option. You would over write the init function to do nothing once it has been called.
var init = function () {
// do the initializing
init = function() {
return false;
}
};
The function when called the first time will do the init. It will then immediately overwrite itself to return false the next time its called. The second time the function is called, the function body will only contain return false.
For more reading: http://www.ericfeminella.com/blog/2011/11/19/function-overwriting-in-javascript/

Why don't you just check to see if your draggables have a class of draggable on them?
if ($('.mydiv').is('.draggable')) {
//do something
}

Function.prototype.fired = false;
function myfunc() {
myfunc.fired = true;
// your stuff
};
console.log(myfunc.fired) // false
myfunc();
console.log(myfunc.fired) // true

What you could do is unhook the init function from the prototype.
​var Obj = function () {
this.init = function () {
document.write("init called<br/>");
this.init = null;
}
}
var o = new Obj();
if (o.init) document.write("exists!<br/>");
o.init();
if (o.init) document.write("exists!<br/>");
o.init();
​
The first if will be true and print exists! but since the function removes itself, the second if will fail. In my example, I call the second init unconditionally just to show that nothing will happen, but of course you could call it only if it exists:
if (o.init) o.init();
http://jsfiddle.net/coreyog/Wd3Q2/

The correct approach is to use the Javascript Proxy APIs to trap the function calls using apply handler.
const initFun = (args) => {
console.log('args', args);
}
const init = new Proxy(initFun, {
apply(target, thisArg, args){
target.calls = target.calls ? target.calls + 1 : 1;
return target.apply(thisArg, args);
}
});
init('hi');
console.log(init.calls); // 1
init('hello');
console.log(init.calls); // 2