Why Doesn't My Callback Work?

JavaScript
1

Can anyone kindly advise why my callback doesn’t work? Pretty sure I am doing something dumb.

I’m looking for iwillbeawebdev.other() to fire after the .each function has finished on iwillbeawebdev.load().

 var iwillbeawebdev = (function() {
 
     var that = {};
 
     that.init = function () {
 
 		iwillbeawebdev.load(function() {
 			iwillbeawebdev.other();
 		});
 
     }
 
     return that;
 
 })();
 
 iwillbeawebdev.load = (function(callback) {
 	var speed = 33;
 	var delay = 1000;
 	var xElement = 0;
 	$(".animate-strikethrough").each(function () {
 		var $this = $(this);
 		var text = $this.text();
 		var textLength = text.length;
 		var $del = $("<del>");
 		var x = 0;
 		xElement += 1;
 		setTimeout(function () {
 			setInterval(function () {
 				x += 1;
 				$del.html(text.substr(0, x));
 
 				$this.html(text.substr(x));
 
 				$this.prepend($del);
 			}, speed);
 		}, delay * xElement);
 	});
 	callback();
 });
 
 iwillbeawebdev.other = (function() {
 	console.log("yoooooooooooooooooooooooo")
 });

I’m new to callbacks and baffled by the set up.

Thanks
James

2

… why?

Sorry, that’s my first response to trying to read that. What… exactly are you trying to do?

3

I’m trying to run iwillbeawebdev.other after the iwillbeawebdev.load function has finished. However iwillbeawebdev.other runs as soon as iwillbeawebdev.load starts running.

4

Well that’s probably because of the first block.

 		iwillbeawebdev.load(function() {
 			iwillbeawebdev.other();
 		});

I’m not sure why you’re doing all of the functions-inside-functions stuff. Are you specifically trying to learn something? Or is the idea just to execute a function after another function? cause…

iwbwd.load();
iwbwd.other();

will do that, when both functions are synchronous.

you’ve got the structure of a callback in your script; usually it’s obfuscated into a framework so that you wouldnt directly call the callback, the framework would take care of it for you automatically;

see jquery’s ajax.success for an example of an implicit callback; you never actually CALL success, you just define it and let the framework call it when it needs it.

for an explicit callback, it works just as you have it in your .load function, take a parameter that is a function, and call it at the end of your current function.

var x = 1;
function imafunc(cbfunc) {
  //Do Some Stuff
  x = x+1;
  cbfunc();
}

function dolater() {
  //Do other stuff!
 console.log(x);
}

dolater(); //Logs 1, because we havent changed x yet.
imafunc(dolater); //Logs 2, because it changes x, and then invokes the logger function.

Also, be careful because jquery already specifies a .load() function on selectors.

1 Like
5

setTimeout and setInterval are both async, so in this case:

iwbwd.load(); 
iwbwd.other();

won’t produce the desired result.

To get around this, you could return a Promise from the load function and chain a .then() on the end, or make it async and await it.

@jamesthemonkeh: ^ this might help clarify things?

1 Like
6

woops, didnt even see those in there, was too busy trying to detangle the whole…load and load and self invoking function hehe.

7

Thanks for your responses, it is much appreciated.

8

No worries. Did you get it to work?

10

I haven’t tried yet…my priorities have shifted…I will try again soon!

11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.