Modifying number of arguments for callback functions - javascript -
i know many of used javascript ui widget plugins, etc... offers callback functions. instance have object x
, has function, let .dothisafteranevent()
. , according official documentation of object x
, function accepts single parameter of type function()
1 argument, let _args
.
to visualize, here example:
var handler = function(_args) { // something. } var x = $("#element-to-widget-ify").transform() x.dothisafteranevent(handler)
my question is, how can modify method .dothisafteranevent()
accept function with 2 or more parameters instead of one? in case, need pass second value handler
function.
edit:
var widgets = { "widget-at-the-nav": $("#nav-widget").transform(), "widget-at-the-footer": $("#nav-footer").transform(), "widget-at-the-search": $("#nav-search").transform(), length: 3 } var handler = function(_args, _option) { console.log("key in: " + _option // other processes... } for(key in widgets) { console.log("key outer: " + key) widget[key].dothisafteranevent(function(json) { console.log("key out: " + key) handler(json, key) }) }
this attempt. prints this:
key outer: widget-at-the-nav key outer: widget-at-the-footer key outer: widget-at-the-search key out: widget-at-the-nav key in: widget-at-the-nav key out: widget-at-the-nav key in: widget-at-the-nav key out: widget-at-the-nav key in: widget-at-the-nav
and forgot tell guys function .dothisafteranevent()
(not handler()
function) has ajax
call inside.
this question mess, i'm going touch on recent edit, , code contains.
your approach masking handler anonymous function pretty correct, it's loop messing lexical scope. ajax bit important detail, because ajax calls going operate long after you've looped, means callback functions reference same final value of key
.
you need create new scope key 'locked in', references correct.
function con () {} con.prototype.dothisafteranevent = function (fn) { // fake ajax programming window.settimeout(function () { fn.call(this); }, 1500); }; $.fn.transform = function () { return new con(); }; var widgets = { "widget-at-the-nav": $("#nav-widget").transform(), "widget-at-the-footer": $("#nav-footer").transform(), "widget-at-the-search": $("#nav-search").transform() }; var handler = function(_args, _option) { console.log("key in: " + _option); // other processes... }; (var key in widgets) { console.log("key outer: " + key); (function (key) { // use iife establish new lexical scope widgets[key].dothisafteranevent(function(json) { console.log("key out: " + key); handler(json, key); }); }(key)); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
in es6
, we'd use let
.
Comments
Post a Comment