❗ 本文最后更新于 5711 天前，文中所描述的信息可能已发生改变，请谨慎使用。

很多情况下，我们需要跨域读取数据，或者是调用别人json格式的api，都要用到js callback这种机制。通常做法是页面上定义一个A方法，再调用第三方的url并且把回调函数名A传过去。这样做固然没什么问题，但有没有更好的方法呢？

用过jQuery的同学肯定都知道，jQuery有一个getJSON的方法，只需要两个参数（callback地址和匿名函数）就能正常工作。摘录官方示例如下：

$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?",
    function(data){
    $.each(data.items, function(i,item){
        $("<img/>").attr("src", item.media.m).appendTo("#images");
        if ( i == 3 ) return false;
    });
});

很神奇吧！在这个例子中，我们并不用指定callback函数名，回调也仅仅只是一个匿名函数而已，那么它是怎么完成函数调用的呢？去看下jQuery的源代码，你会发现其实原理很简单。如果懒得看太多代码，看看下面我写的山寨版loadJSON，也能明白。

function loadJSON(url,callback){
    var cn = "jscallback"+(+new Date());
    var s = document.createElement("script");
    s.type = "text/javascript";
    s.src = url+cn;
    window[cn] = callback;
    document.getElementsByTagName("head")[0].appendChild(s);
};
loadJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=",function(o){
    for(var i=0;i<3;i++){
        var img = document.createElement("img");
        img.src = o.items[i].media.m;
        document.body.appendChild(img);
    }
});

演示地址

本文链接：https://imququ.com/post/js-callback-name.html，参与评论 »

--EOF--

发表于 2009-04-03 14:41:02，并被添加「JavaScript」标签。查看本文 Markdown 版本 »

本站使用「署名 4.0 国际」创作共享协议，相关说明 »