Jquery - Using promise API

Jquery - Using promise API

本文关键字：API promise Using Jquery      更新时间：2023-09-26

我试图创建一个简单的进度条。当进度条上的动画完成时，我需要获得一个事件/执行操作（100%宽度由绿色填充）。

HTML-

<button>Go</button>
<p>Waiting</p>
<div id="bar" class="progress-bar">
    <div class="progress-bar-fill"></div>
</div>

CSS-

.progress-bar {
    background-color: #EEE;
    height: 10px;
    overflow: hidden;
    width:100%;
}
.progress-bar-fill {
    background-color: green;
    height: 100%;
    transition: width 5s ease 0s;
    width: 0;
}

JS-

$("button").on("click", function () {
    $("p").append(" --> Started");
    $('#bar .progress-bar-fill').css('width', '100%');
    $('#bar .progress-bar-fill').promise().done(function () {
        $("p").append(" --> Finished");
    });
});

链接-http://jsfiddle.net/v2unc/

WRT代码，"完成"指示应在5秒钟后出现。但只要点击按钮，它就会出现。

"http://api.jquery.com/promise/"效果很好。或者我看错了API？

将ontransitionend事件用于CSS3动画：

演示

$("button").on("click", function () {
    $("p").append(" --> Started");
    $('#bar .progress-bar-fill').css('width', '100%').on('transitionend', function () {
        $("p").append(" --> Finished");
    });
});

您看到的是错误的API。.promise返回一个promise，该promise在元素上的挂起操作队列完成时实现。默认情况下，这意味着动画队列。jQuery没有为您的进度条设置动画，因此动画队列始终为空，promise会立即解析。

由于进度条是通过CSS转换来设置动画的，所以你可以做的最简单的事情就是设置一个与转换持续时间同步的计时器，例如

$("button").on("click", function () {
    $("p").append(" --> Started");
    $('#bar .progress-bar-fill').css('width', '100%');
    setTimeout(5000, function () {
        $("p").append(" --> Finished");
    });
});

当然，这是相当低的技术，需要你重复过渡持续时间（糟糕）。与其这样，不如选择transitionEnd事件。

相关文章：