令人发指的js运行速度

先上一段代码

var jsonp = function (url, func, type) {

    var callback = "jsonpCallback_" + new Date().getTime() ,

        url = url + (url.indexOf( '?' ) + 1 ? '&' : '?') + 'callback=' + callback,

        s = creatElement("script", {"src": url});

    //console.log(callback,"callback")

    window[callback] = function (data) {

        func(data, type);

    };

    document.body.appendChild(s);

}

这是一段jsonp请求的函数，其中type是工作中需要，请忽略。用着感觉是没问题的，但是实际却遇到了一个bug。

bug产生过程

    jsonp(url1, ajaxHandle, "xxx");

    jsonp(url2, ajaxHandle, "xxxx");

当我连着写调用jsonp函数的时候看着貌似也没啥问题，
jsonp里会根据时间戳生成两个不同的全局

jsonpCallback_date1(),

jsonpCallback_date2()

时间戳函数。
但是这里居然可能会返回一样的时间戳。。。也就是说第二个url2请求函数会把第一个请求函数给覆盖了。导致第一个url1无法正常解析。
这也就是说，js几乎在同时调用了这两个jsonp函数。。。

 

解决办法，新增一个随机数，如果随机数也能再次惊人的重合，只能呵呵了。

var jsonp = function (url, func, type) {

    var callback = "jsonpCallback_" + new Date().getTime() + Math.floor(Math.random() * 1000000),

        url = url + (url.indexOf( '?' ) + 1 ? '&' : '?') + 'callback=' + callback,

        s = creatElement("script", {"src": url});

    //console.log(callback,"callback")

    window[callback] = function (data) {

        func(data, type);

    };

    document.body.appendChild(s);

}


-----------------------------------------------------------------

上面这个办法毕竟还是有缺陷，从逻辑上就允许出现bug，虽然概率极小，但是还是不应该，所以采用闭包的方式存储一个变量来避免出现callback函数同名的情况，详见

var jsonp = (function () {

        var num = 0;

        function foo(url, callbackFunc){

            num++;

            var callback = "jsonpCallback_" + num,

            url = url + (url.indexOf('?') + 1 ? '&' : '?') + 'callback=' + callback,

            s = creatElement("script", {"src": url});

            window[callback] = function (data) {

                callbackFunc(data);

                window[callback] = null;

            };

            document.body.appendChild(s);

        }

        return foo;

    }());

　　这样每次调用jsonp就能保证callback函数不一样了。