jsonpCallback: xx is not a function

2023-07-23 12:10:10

参考文献：

https://www.cnblogs.com/lenghan/p/5777588.html

　　根据原理解读，发现同一个页面如果多个ajax请求调用的jsonpCallback名字相同的话，会在执行完第一个jsonpCallback后，就会置为undefined

function setCoupons22222222222(){
    $.ajax({
        type: 'GET',
        url: "https://api.pangku.com/v1/coupons/channel?count=1&serialId=2824&brandId=2&regionId=1&ad_num=03",
        dataType:'jsonp',
        cache: true,
        jsonpCallback: 'setCouponsChannel',
        success:function(resultData){
　　　　　　  console.log("哈哈");
            console.log(resultData);
        },
        error:function(data){
            console.log(1234);
        }
    });
}
setCoupons22222222222();
setCoupons22222222222();

　　暂时发现有两种解决方法：

第一种，设置不同的jsonpCallback名称，比如在for循环里调用的时候，每个名字加上循环的i来区分（实际上缓存就失效了？）

function setCoupons22222222222(i){
    $.ajax({
        type: 'GET',
        url: "https://api.pangku.com/v1/coupons/channel?count=1&serialId=2824&brandId=2&regionId=1&ad_num=03",
        dataType:'jsonp',
        cache: true,
        jsonpCallback: 'couponsChannel'+i,
        success:function(resultData){
　　　　　　  console.log("哈哈");
            console.log(resultData);
        },
        error:function(data){
            console.log(1234);
        }
    });
}

setCoupons22222222222(1);
setCoupons22222222222(2);
setCoupons22222222222(3);
setCoupons22222222222(4);
setCoupons22222222222(5);
setCoupons22222222222(6);

优化一下，让网站缓存继续可用：

var a=1;

function setCoupons22222222222(){
    a=a+1
    $.ajax({
        type: 'GET',
        url: "https://api.pangku.com/v1/coupons/channel?count=1&serialId=2824&brandId=2&regionId=1&ad_num=03",
        dataType:'jsonp',
        cache: true,
        jsonpCallback: 'couponsChannel'+a,
        success:function(resultData){
　　　　　　 console.log("哈哈");
            console.log(resultData);
        },
        error:function(data){
            console.log(1234);
        }
    });
}

setCoupons22222222222();
setCoupons22222222222();
setCoupons22222222222();
setCoupons22222222222();
setCoupons22222222222();
setCoupons22222222222();

第二种，定义jsonpCallback函数，但是不做处理，例如：

function setCoupons22222222222(){
    $.ajax({
        type: 'GET',
        url: "https://api.pangku.com/v1/coupons/channel?count=1&serialId=2824&brandId=2&regionId=1&ad_num=03",
        dataType:'jsonp',
        cache: true,
        jsonpCallback: 'setCouponsChannel',
        success:function(resultData){
　　　　　　　 console.log("哈哈");
            console.log(resultData);
        },
        error:function(data){
            console.log(1234);
        }
    });
}
function setCouponsChannel(data){console.log("hello")};
setCoupons22222222222();
setCoupons22222222222();

你会发现先打印hello再打印上面的哈哈，就是说ajax返回后先调用jsonpCallback处理返回的数据，再将返回的数据传给success进行处理

----------------------------------------------------我是分割线--------------------------------------------------------------

另外一种情况是，在你发现ajax的时候，别人把你ajax注册到window对象的jsonpCallback函数置为undefined了

例如：

function setCoupons22222222222(){
    $.ajax({
        type: 'GET',
        url: "https://api.pangku.com/v1/coupons/channel?count=1&serialId=2824&brandId=2&regionId=1&ad_num=03",
        dataType:'jsonp',
        cache: true,
        jsonpCallback: 'setCouponsChannel',
        success:function(resultData){
            console.log(resultData);
        },
        error:function(data){
            console.log(1234);
        }
    });
       window.setCouponsChannel=null;
}
setCoupons22222222222();

码农公寓

相关文章