Javascript 完成后跳转到进度条的末尾

我有一个有效但丑陋的解决方案

这个想法是：

在ajax调用之前运行进度条

完成（或失败）时跳转到进度条的末尾

如果ajax调用尚未完成，则等待90%（完成时比跳转结束时慢）

我的解决方案中至少有三个问题：

我必须在3个位置重置进度条“宽度”

我必须有公共变量（widthProgressBar）

如果我想在同一页上有两个进度条，我不能重用函数“startProgress”

这是我的解决方案：

var-barping=0；
//处理click事件，发送查询
函数getSuccessOutput（）{
宽度棒=0；
startProgress（“pingTestBar”）；
$.ajax({
url:“/echo/js/？js=hello%20world！”，
完成：功能（响应）{
宽度棒=99；
},
错误：函数（）{
宽度棒=99；
},
});
返回false；
}
功能启动进程（barId）{
var elem=document.getElementById（barId）；
var id=设置间隔（第15帧）；
函数框架（）{
如果（widthProgressBar>=90&&widthProgressBar<99）{}
如果（宽度进度条>=100）{
清除间隔（id）；
}否则{
widthProgressBar++；
elem.style.width=widthProgressBar+'%'；
elem.innerHTML=widthProgressBar*1+'%'；
}
}
}

.testProgress{
宽度：100%；
背景色：#ddd；
}
.testProgressBar{
宽度：0%；
高度：30px；
背景色：#4CAF50；
文本对齐：居中；
线高：30px；
颜色：白色；
}

|

这是您修改的代码

通过使用始终存在的

barId

元素的宽度（

var-widthProgressBar=elem.style.width.slice（0，-4）；

），我消除了全局变量

widthProgressBarPing

）

//处理单击事件，发送查询
函数getSuccessOutput（barId）{
宽度棒=0；
startProgress（barId）；
$.ajax({
url:“/echo/js/？js=hello%20world！”，
完成：功能（响应）{
宽度棒=99；
},
错误：函数（）{
宽度棒=99；
},
});
返回false；
}
功能启动进程（barId）{
var elem=document.getElementById（barId）；
var widthProgressBar=elem.style.width.slice（0，-4）；
var id=设置间隔（第15帧）；
函数框架（）{
如果（widthProgressBar>=90&&widthProgressBar<99）{}
如果（宽度进度条>=100）{
清除间隔（id）；
}否则{
widthProgressBar++；
elem.style.width=widthProgressBar+'%'；
elem.innerHTML=widthProgressBar*1+'%'；
}
}
}

.testProgress{
宽度：100%；
背景色：#ddd；
}
.testProgressBar{
宽度：0%；
高度：30px；
背景色：#4CAF50；
文本对齐：居中；
线高：30px；
颜色：白色；
}

||

这是您修改的代码

通过使用始终存在的

barId

元素的宽度（

var-widthProgressBar=elem.style.width.slice（0，-4）；

），我消除了全局变量

widthProgressBarPing

）

//处理单击事件，发送查询
函数getSuccessOutput（barId）{
宽度棒=0；
startProgress（barId）；
$.ajax({
url:“/echo/js/？js=hello%20world！”，
完成：功能（响应）{
宽度棒=99；
},
错误：函数（）{
宽度棒=99；
},
});
返回false；
}
功能启动进程（barId）{
var elem=document.getElementById（barId）；
var widthProgressBar=elem.style.width.slice（0，-4）；
var id=设置间隔（第15帧）；
函数框架（）{
如果（widthProgressBar>=90&&widthProgressBar<99）{}
如果（宽度进度条>=100）{
清除间隔（id）；
}否则{
widthProgressBar++；
elem.style.width=widthProgressBar+'%'；
elem.innerHTML=widthProgressBar*1+'%'；
}
}
}

.testProgress{
宽度：100%；
背景色：#ddd；
}
.testProgressBar{
宽度：0%；
高度：30px；
背景色：#4CAF50；
文本对齐：居中；
线高：30px；
颜色：白色；
}

||

我相信这是正确的方法，不会在使用范围之外更改不必要的变量

//处理单击事件，发送查询
函数getSuccessOutput（）{
var bar=新条（“pingTestBar”）；
$.ajax({
url:“/echo/js/？js=hello%20world！”，
完成：功能（响应）{
吧台
},
错误：函数（）{
吧台
},
});
返回false；
}
功能条（barId）{
var self=这个；
自相关系数w=0；
var elem=document.getElementById（barId）；
var id=设置间隔（第15帧）；
this.finish=函数（）{
清除间隔（id）；
自我评价：w=100；
changelem（）
}
函数changelem（）{
elem.style.width=self.w+'%'；
elem.innerHTML=self.w*1+'%'；
}
函数框架（）{
如果（self.w>=90&&self.w<99）{}
如果（self.w>=100）{
}否则{
self.w++；
changelem（）
}
}
}

.testProgress{
宽度：100%；
背景色：#ddd；
}
.testProgressBar{
宽度：0%；
高度：30px；
背景色：#4CAF50；
文本对齐：居中；
线高：30px；
颜色：白色；
}

|

我相信这是正确的方法，不会在使用范围之外更改不必要的变量

//处理单击事件，发送查询
函数getSuccessOutput（）{
var bar=新条（“pingTestBar”）；
$.ajax({
url:“/echo/js/？js=hello%20world！”，
完成：功能（响应）{
吧台
},
错误：函数（）{
吧台
},
});
返回false；
}
功能条（barId）{
var self=这个；
自相关系数w=0；
var elem=document.getElementById（barId）；
var id=设置间隔（第15帧）；
this.finish=函数（）{
清除间隔（id）；
自我评价：w=100；
changelem（）
}
函数changelem（）{
要素s