关键词：
【中文标题】JavaScript - 更新进度条 - 确保函数需要一定的时间【英文标题】：JavaScript - updating progress bar - ensure that an function takes an amount of time 【发布时间】：2014-02-18 23:49:16 【问题描述】：我的页面上有一个简单的进度条。它每秒更新一次（可能有点矫枉过正），但更新之间没有动画。
目前，更新如下所示：10% -> 15% -> 23% ... 等等
我希望进度条更流畅，而不是从一个值跳到下一个值
function update()
current += 10;
// what can I do here to make the animation more fluid?
// so that it looks like 10% -> 11% -> 12%
// similar to 'fast' animation or 'slow' animation
$("progress").val(current);
if (current >= max) clearInterval(interval);
console.log(current);
;
http://jsfiddle.net/VFx3L/1/
理想情况下，我希望从一个值更新到另一个值需要一秒钟。谁能指出我正确的方向？
【问题讨论】：
【参考方案1】：只需减少更新以添加 1 而不是 10 这使得步数更小，然后将间隔减少到 100.. 这会创建一个更流畅的条形
$(function ()
var current = 0;
var max = 100;
function update()
current += 1;
// what can I do here to make the animation more fluid?
$("progress").val(current);
if (current >= max) clearInterval(interval);
console.log(current);
;
var interval = setInterval(update, 100); //choose how fast to update
);
查看新的 Fiddle http://jsfiddle.net/72SG9/
谢谢
亚当
【讨论】：
通过委托函数设置集合视图中进度条的值
...：2014-06-1403:25:59【问题描述】：我有一个收藏视图。我想更新其单元格中的进度条。我已经对单元格进行了子类化。问题是我从委托函数中获取进度条的值。此委托函数提供进度条值，我想更新集合视图中的特定进度条。现在，... 查看详情
vc6.0里mfc进度条如何使用
...以其操作主要是设置进度条的范围和当前位置，并不断地更新当前位置。进度条的范围用来表示整个操作过程的时间长度，当前位置表示完成情况的当前时刻。SetRange()函数用来设置范围，初始范围为0-100，SetPos()函数用来设置当... 查看详情
AsyncTask 和进度条 [重复]
...件）到服务器的应用程序，每个文件发送和获取响应都会更新进度条。一旦所有文件都发送完毕，它就会被关闭。我已经通过在循环中调用发送函数成功地实现了这一点，并且进度条得到了更新。现在我想AsyncTask为每个文件执行... 查看详情
Symfony Ajax 进度条
...有一个循环遍历的ajax控制器。我想在此控制器进度之后更新进度条。基本上，我只需要输出一个$(\'.bar\').css(\'width\',$percent.\'%\')。但所有这些输出只是在函数完成后累积并发送。如何在每次输出后更新栏？我已经尝试过flush()和ob... 查看详情
学习进度条
第七周所花时间6代码量600博客量1了解到的知识点1.javaweb中的框架结构。2.如何构建词法分析器。3.java外观模式。4.JavaScript中一些函数的构造。 查看详情
如何更新引导进度条。
】如何更新引导进度条。【英文标题】：Howtoupdatebootstrapprogressbar.【发布时间】：2016-11-2216:23:07【问题描述】：关于引导进度条的文档说明了如何显示具有默认值和完成值的进度条，但现在如何更新它？那么，更新值和宽度的最... 查看详情
javascript常用进度条
1.通过加载状态事件制作进度条：知识点： document.onreadystatechange//页面加载状态改变时的事件document.readyState//返回当前文档的状态uninitialized-还未开始载入loading-载入中interactive-已加载，文档与用户可以开始交互complete-载入完... 查看详情
添加了图像上传进度条（Paperclip、Javascript），但图像本身没有被保存。我怎样才能解决这个问题？
】添加了图像上传进度条（Paperclip、Javascript），但图像本身没有被保存。我怎样才能解决这个问题？【英文标题】：Addedaimageuploadprogressbar(Paperclip,Javascript),butimagesthemselvesarenotbeingsaved.HowcanIfixthis?【发布时间】：2019-07-1210:29:02【... 查看详情
利用原生javascript实现进度条（可做页面头部进度条，或者局部进度条均可）
1<divclass="top-progress"id="js-top-progress"></div><!--结构只有一句话即可-->2<scriptsrc="./static/js/progress.js"></script>3<scripttype="text/javascript">4varp=myProgress.c 查看详情
iOS 进度条不更新
】iOS进度条不更新【英文标题】：iOSprogressbarnotupdating【发布时间】：2016-11-3019:13:13【问题描述】：我遇到了一个进度条没有更新的问题（它一直是灰色的）。我得到了这个方法来更新MainViewController.m中的进度条：-(void)setProgress:(f... 查看详情
Android AsyncTask 没有更新进度条
】AndroidAsyncTask没有更新进度条【英文标题】：AndroidAsyncTaskisnotupdatingProgressBar【发布时间】：2019-01-0822:46:38【问题描述】：您好，我在使用asynctask时遇到问题。我播放了一首歌曲，然后将持续时间更新到进度条。但是当我播放一... 查看详情
使用 Flask 更新进度条
】使用Flask更新进度条【英文标题】：UpdatingprogressbarwithFlask【发布时间】：2019-07-1011:40:45【问题描述】：我正在尝试更新进度条-我尝试在下面的代码周围实现代码here，但无法使其正常工作。当我运行我的代码时，进度条会出现... 查看详情
如何循环更新进度条？
】如何循环更新进度条？【英文标题】：Howtoupdateaprogressbarinaloop?【发布时间】：2016-07-3017:09:03【问题描述】：循环更新Tkinter进度条的简单方法是什么？我需要一个没有太多混乱的解决方案，所以我可以在我的脚本中轻松实现它... 查看详情
网络通话期间的进度条更新
】网络通话期间的进度条更新【英文标题】：Progressbarupdateduringanetworkcall【发布时间】：2017-01-2402:40:39【问题描述】：我正在尝试在网络调用期间实现水平进度条更新。我用来进行网络调用的API只需回调onSuccess和onFailure。完成大... 查看详情
如何更新进度条 OnSelectedIndexChanged？
】如何更新进度条OnSelectedIndexChanged？【英文标题】：HowdoIupdateaprogressbarOnSelectedIndexChanged?【发布时间】：2009-06-1105:38:21【问题描述】：我正在使用.NET(C#)开发一个Windows应用程序，并且我有一个带有一些列表项的DropDownList。在事件... 查看详情
Inno Setup - 正确定时更新进度条
】InnoSetup-正确定时更新进度条【英文标题】：InnoSetup-Correctlytimingupdateofprogressbar【发布时间】：2016-12-0217:02:05【问题描述】：我忘记了如何在InnoSetup中根据条件正确更新进度条，我写了一个代码来更新我在Wizard中创建的进度条。... 查看详情
ReactJS进度条使用状态动态更新？
】ReactJS进度条使用状态动态更新？【英文标题】：ReactJSprogressbardynamicallyupdatingusingstate?【发布时间】：2021-01-2720:58:29【问题描述】：我正在使用PrimeReact进度条，并希望在页面加载时动态更新它。我的代码在下面-constIntroPage=()=>... 查看详情
从 .NET C# DLL 更新 MFC 对话框中的进度条
】从.NETC#DLL更新MFC对话框中的进度条【英文标题】：UpdatingprogressbarinMFCdialogfrom.NETC#DLL【发布时间】：2019-05-0704:29:11【问题描述】：我已经看到了这个article，但我需要反过来，发现它很混乱。我有一个C#DLL，它正在执行一项使用... 查看详情