🍞🍞🍞 Full thorough explanation || ✅ simple, beginner friendly
Approach\nThis problem can be a bit confusing, as simple as the solution code is, so I will convey the problem in a step-by-step concrete manner. The following 
# Approach\nThis problem can be a bit confusing, as simple as the solution code is, so I will convey the problem in a step-by-step concrete manner. The following example is how ```cancellable``` works:\n\nLet\'s say we want to execute a function ```foo``` defined as follows:\n```\nfunction foo(message) {\n    console.log("If you see this message, I wasn\'t cancelled!!!");\n    console.log("I want to tell the world this:");\n    console.log(message);\n}\n```\nHowever, we want ```foo``` to be cancellable within the next 1000 milliseconds. And so, we call ```foo``` with ```var myMsg = cancellable(foo, "pineapple", 1000);```\n\nOnce ```myMsg``` is defined, it will take 1000 milliseconds to execute ```foo```. However, if ```myMsg``` is ever called before 1000 milliseconds, ```foo``` will be cancelled. Aka, if we do ```myMsg()``` 1000 milliseconds after we defined ```myMsg```, then ```foo``` will not execute.\n\u2014\nThe above is an example of ```cancellable``` in action. Now, to discuss how to implement it.\n\nFirst, let\'s set a timeout. We can do this as one normally would:\n```\nvar timeout = setTimeout(() =>\n    fn(...args)\n, t)\n```\nNow the timeout is running. After this, let\'s define a way to clear this timeout.\n```\nvar cancelFn = () => clearTimeout(timeout);\n```\nNote, unlike ```timeout```, we did not execute ```cancelFn```. This is due to the fact that ```timeout``` is calling a function (the right side is formatted as ```function(somestuff)```), whereas ```cancelFn``` is simply the definition of a function (the right side is formatted as ```() => function(somestuff)```). If we instead wrote ```var cancelFn = clearTimeout(timeout)```, we would always cancel right after we start the timeout, and always fail to execute the function.\n\nFinally, let\'s have ```cancellable``` return ```cancelFn```. The reasoning behind this is as follows. We defined ```cancelFn```, but we need to be able to call it. By making ```cancellable``` return ```cancelFn```, the return line calls ```cancelFn```, which will cause ```cancelFn``` to execute (aka, it will cancel ```timeout```). And so, when we call cancellable, we execute the return line, thereby executing ```cancelFn```. Using the ```myMsg``` example above as demonstration, when we call ```myMsg()```, we return ```cancelFn```, which means we execute ```cancelFn```, thereby clearing ```timeout``` and cancelling ```foo```.\n\nAnd there you have it, a cancellable function!\n\n# Code\n```\nvar cancellable = function(fn, args, t) {\n    // call setTimeout, which is set to call fn after t amount of time\n    var timeout = setTimeout(() =>\n        fn(...args)\n    , t)\n\n    // define a clearTimeout\n    var cancelFn = () => clearTimeout(timeout);\n\n    // When/if we call the function, it will return cancelFn,\n    // and since the return line calls (and consequentially executes)\n    // cancelFn, timeout will be cancelled, thereby cancelling fn\n    return cancelFn;\n};\n```\nUPVOTE if this was helpful \uD83C\uDF5E\uD83C\uDF5E\uD83C\uDF5E
['Design', 'JavaScript']