setInterval回调函数is not defined

m0_55842723

已于 2024-03-24 16:47:08 修改

阅读量262

点赞数 8

文章标签： javascript jquery ajax

于 2024-03-20 12:40:09 首次发布

本文链接：https://blog.csdn.net/m0_55842723/article/details/136872664

版权

1、问题发现

我想在jQuery的ajax函数的success回调函数中定义一个计时器，以处理调用成功后页面的一些变化，具体代码如下：

$(function(){
    $.ajax({
        type: "POST",
        url: "/upload",
        data: formData,
        dataType : 'JSON',
        processData : false,
        contentType : false,
        success: function(msg){
        if($.trim(msg.result)=="success"){
            var i = 3;
            $("h2").text("申请成功！将在"+ i + "秒后返回首页...")
            var timer = null;

            // 回调函数
            function change(){
                i--;
                $("h2").text("申请成功！将在"+ i + "秒后返回首页...")
                if(i==0){
                    window.clearInterval(timer);
                    timer=null;
                    window.location.href = "/";
                }
            }

            function start_timer(){
                timer = window.setInterval("change()", 1000);
            }
  
            start_timer()
        }
        else {
            alert("申请失败！")
        }
    });
})

但是前端一直报错：change is not defined

可以看到定时器被调用了，但是没找到change。

2、问题解决

使用window对象的setInterval方法，作为第一个参数传递的function必须在全局作用域中定义，否则会出现报错而无法执行。

正确代码：

var i = 3;
var timer = null;

// 回调函数
function change(){
    i--;
    $("h2").text("申请成功！将在"+ i + "秒后返回首页...")
    if(i==0){
        window.clearInterval(timer);
        timer=null;
        window.location.href = "/";
    }
}

$(function(){
    $.ajax({
        type: "POST",
        url: "/upload",
        data: formData,
        dataType : 'JSON',
        processData : false,
        contentType : false,
        success: function(msg){
        if($.trim(msg.result)=="success"){

            $("h2").text("申请成功！将在"+ i + "秒后返回首页...")
    
            function start_timer(){
                timer = window.setInterval("change()", 1000);
            }
  
            start_timer()
        }
        else {
            alert("申请失败！")
        }
    });
})