-1
\$\begingroup\$

I am trying to come up with a minimal example of what is known as callback hell in JavaScript (so this would be a bad code review I guess). This is what I have so far, and I would like it to also run without making external requests. I'm not sure if that's possible or if this example is hellish enough (do I need to introduce errors,arguments in the callbacks etc.). The point I am trying to make is that it is hard to tell when things happen.

I am aware of another hellish construct called the Pyramid of Doom, in my mind and from what I've read that could be a different problem, i.e. while order is somehow clear, nesting makes it hard to troubleshoot,maintain and write.

function one() {
  setTimeout(function() {
    console.log('1. First thing calling Second thing');
    two();
  }, 2000);
};

function two() {
  console.log('2. Second thing');
}

function three() {
  setTimeout(function() {
    console.log('3. Third thing calling fourth thing');
    four();
  }, 1000);
}

function four() {
  console.log('4. Fourth thing');
}

one();
three();

// "3. Third thing calling fourth thing"
// "4. Fourth thing"
// "1. First thing calling Second thing"
// "2. Second thing"
\$\endgroup\$
2
  • \$\begingroup\$ In addition to being a "hypothetical" example, this question is off-topic for violating the "Do you want it to be good code?" rule. (See the help center.) \$\endgroup\$ Nov 4 '16 at 6:02
  • \$\begingroup\$ @200_success sorry, It is not clear what that line means, what the heck is code golfing ? , anyways I did got my answer before your guys put it on hold and I think it is both useful and should be a minimal example rather than some production code. But I a don't have your fake points to defend myself, so I ll go play over there, have a nice day. \$\endgroup\$
    – Keno
    Nov 4 '16 at 17:26
4
\$\begingroup\$

I think your example is sufficient to demonstrate that setTimeout can result in weird interleavings. But if you asked me for an example of callback hell, I'd assume you wanted something like

function one() {
  setTimeout(function() {
    console.log('1. First thing setting up second thing');
    setTimeout(function() {
      console.log('2. Second thing setting up third thing');
      setTimeout(function() {
        console.log('3. Third thing setting up fourth thing');
        setTimeout(function() {
          console.log('4. Fourth thing');
        }, 2000);
      }, 2000);
    }, 2000);
  }, 2000);
};

where the "hell" expresses itself in the form of a big triangle of whitespace along the left margin. You'd typically see this with API functions that take an "on success" callback and/or an "on failure" callback.

function compute_first_parameter(cb) { cb(42); } 
function compute_second_parameter(cb) { cb(10); }
function compute_sum(a, b, cb) { cb(a + b); }

function compute_a_result() {
    compute_first_parameter(function (x) {
        compute_second_parameter(function (y) {
            compute_sum(x, y, function(result) {
                console.log(result);  // 52
            });
        });
    });
}

Actually, http://callbackhell.com exists, and it has a good example right on the first page above the fold. So just go read that whole site. :)

\$\endgroup\$
1
  • \$\begingroup\$ I was just there !, So the issue I have is that most folks refer to your example as the Pyramid of Doom, which makes the point that nesting is not all that clear ( the order might be) , edited my question to clarify. \$\endgroup\$
    – Keno
    Nov 4 '16 at 3:02

Not the answer you're looking for? Browse other questions tagged or ask your own question.