Javascript:Promise() .then 不起作用-6ren

Javascript:Promise() .then 不起作用

转载作者：行者123 更新时间：2023-11-30 00:02:52

我正在尝试为我的网站制作加载器动画样式。加载动画是16条，按顺序递增递减。例如，第一个条形会增加，然后减小回到原来的大小。然后下一个柱将重复此过程，直到所有柱都完成为止，然后停止该过程并显示页面。在这种情况下，因为 JavaScript 在调用函数时是异步的，所以我使用了一个 promise 来绕过它。 promise 的使用是在前一个完成动画后，对 bar 进行动画处理。目前，我的代码只对第一个栏进行动画处理并停在那里。它不会继续为其余的动画。以下是我的所有代码:

重要!在 javascript 上发布它。不要花时间在 HTML 或 CSS 上。

var index = -1;

function loading(){
	var loader = document.getElementById("loader");
	display = window.getComputedStyle(loader).display;
	if (display == "block"){
		var child = document.getElementById("loader-ul").getElementsByTagName("div");
		index = index + 1;
		alert("dd");
		animate(child);
	}
}

function animate(element){
	var el = element[index];
	var MaxHeight = false;
	var finished = false;
	function anim(){
		return new Promise(function(resolve, reject){
			if (finished == false){
				if (MaxHeight == false){
					var height = parseInt(window.getComputedStyle(el).height.slice(0, -2));
					var Bot = parseFloat(window.getComputedStyle(el).bottom.slice(0, -2));
					height = height + 1;
					Bot = Bot + 0.5;
					el.style.bottom = Bot + "px";
					el.style.height = height + "px";
					if (height <= 100){
						window.requestAnimationFrame(anim);
					}
					else{
						MaxHeight = true;
					}
				}
				if (MaxHeight == true){
					var height = parseInt(window.getComputedStyle(el).height.slice(0, -2));
					var Bot = parseFloat(window.getComputedStyle(el).bottom.slice(0, -2));
					height = height - 1;
					Bot = Bot - 0.5;
					el.style.bottom = Bot + "px";
					el.style.height = height + "px";
					if (height >= 50){
						window.requestAnimationFrame(anim);
					}
					else{
						MaxHeight = true;
						finished = true;
						el.style.bottom = 0 + "px";
						el.style.height = 50 + "px";
					}
				}
			}
			else{
				resolve();
			}
		});
	}
	anim().then(loading);
}

body{
	margin: 0px;
	padding: 0px;
	margin: auto;
}

#loader{
	display: block;
	position: fixed;
	height: 100%;
	width: 100%;
	background-color: white;
	z-index: 9999;
}

#loader .center{
	position: relative;
	height: 50px;
	width: 200px;
	background-color: red;
	top: 50%;
	transform: translateY(-50%);
	margin: auto;
}

#loader .center div{
	width: 2px;
	height: 50px;
	background-color: blue;
	float: left;
	padding: 0px;
	margin-right: 5px;
	margin-bottom: 25px;
	position: relative;
}

<body onload="loading()">
    <div id="loader">
			<div class="center" id="loader-ul">
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
			</div>
		</div>
	</body>

我还有一个指向 jsfiddle 的链接:

https://jsfiddle.net/6227jjen/

谢谢大家!

注意:为了调试目的，我添加了一些警报。

最佳答案

问题是不是所有路径都能解决。更大的问题是你的代码创建了很多而不是一个 promise 。这是更改的概要。

function anim () {
  return new Promise (function (resolve) {
    function _anim () {
      if (!finished) {
          _logic();
          // By putting requestAnimationFrame at the end, you can ensure 
          // that it will be called after your logic
          // (assuming finished eventually equals true).
          window.requestAnimationFrame(_anim);
      }
     else 
       resolve();
    }
  });

这是实际的修复。

var index = -1;

function loading() {
  var loader = document.getElementById("loader");
  display = window.getComputedStyle(loader).display;
  if (display == "block") {
    var child = document.getElementById("loader-ul").getElementsByTagName("div");
    index = index + 1;
    alert("dd");
    animate(child);
  }
}

function animate(element) {
  var el = element[index];
  var MaxHeight = false;
  var finished = false;

  function anim() {
    return new Promise(function(resolve, reject) {
      function _anim() {
        if (finished == false) {
          if (MaxHeight == false) {
            var height = parseInt(window.getComputedStyle(el).height.slice(0, -2));
            var Bot = parseFloat(window.getComputedStyle(el).bottom.slice(0, -2));
            height = height + 1;
            Bot = Bot + 0.5;
            el.style.bottom = Bot + "px";
            el.style.height = height + "px";
            if (height > 100) {
              MaxHeight = true;
            }
          }
          if (MaxHeight == true) {
            var height = parseInt(window.getComputedStyle(el).height.slice(0, -2));
            var Bot = parseFloat(window.getComputedStyle(el).bottom.slice(0, -2));
            height = height - 1;
            Bot = Bot - 0.5;
            el.style.bottom = Bot + "px";
            el.style.height = height + "px";
            if (height < 50) {
              MaxHeight = true;
              finished = true;
              el.style.bottom = 0 + "px";
              el.style.height = 50 + "px";
            }
          }
          window.requestAnimationFrame(_anim);
        } else {
          resolve();
        }
      }
      _anim();
    });
  }
  anim().then(loading);
}

body {
  margin: 0px;
  padding: 0px;
  margin: auto;
}
#loader {
  display: block;
  position: fixed;
  height: 100%;
  width: 100%;
  background-color: white;
  z-index: 9999;
}
#loader .center {
  position: relative;
  height: 50px;
  width: 200px;
  background-color: red;
  top: 50%;
  transform: translateY(-50%);
  margin: auto;
}
#loader .center div {
  width: 2px;
  height: 50px;
  background-color: blue;
  float: left;
  padding: 0px;
  margin-right: 5px;
  margin-bottom: 25px;
  position: relative;
}

<body onload="loading()">
  <div id="loader">
    <div class="center" id="loader-ul">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>
</body>

关于Javascript:Promise() .then 不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39681448/

文章推荐： javascript - 在 JQuery 循环中的 Ajax 请求之前发出警报

文章推荐： android - 禁用按钮时删除色调

文章推荐： javascript - 在angularJS中绑定(bind)数据时动态字符串拆分

文章推荐： javascript - 在某些情况下 Roman 到 Int 的转换不正确

实例分析Try {} Catch{} 作用
今天有小伙伴给我留言问到，try{...}catch(){...}是什么意思？它用来干什么？简单的说他们是用来捕获异常的下面我们通过一个例子来详细讲解下
html - 列表社交媒体链接的 ARIA 作用
我正在努力提高网站的可访问性，但我不知道如何在页脚中标记社交媒体链接列表。这些链接指向我在 facecook、twitter 等上的帐户。我不想用 role="navigation" 标记这些链接，因
java.util.Timer SystemTime 作用？
说现在是 6 点，我有一个 Timer 并在 10 点安排了一个 TimerTask。之后，System DateTime 被其他服务(例如 ntp)调整为 9 点钟。我仍然希望我的 TimerTas
php - 什么是 Doctrine hydration 作用？
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
python入门:argparse浅析 nargs='+'作用
我就废话不多说了，大家还是直接看代码吧~ ? 1
Maven是什么?Maven的概念+作用+仓库的介绍+常用命令的详解
Maven系列1 1.什么是Maven？ Maven是一个项目管理工具，它包含了一个对象模型。一组标准集合，一个依赖管理系统。和用来运行定义在生命周期阶段中插件目标和逻辑。核心功能 Mav

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

Javascript:Promise() .then 不起作用