- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我试图在短时间内显示每个列表项元素,而不是一次全部显示。每个列表项应该在相应的 setTimeout 延迟后淡入,但由于某种原因它不起作用。它仅将类添加到最后一个 li 元素,而不是任何其他元素。
// self-invoking anonymous function
(function() {
"use strict";
// Local scope vars (elements)
var slider, submit, display, list, reset;
// initialize
function init() {
// Grab elements
slider = document.getElementById("slider");
submit = document.getElementById("submit");
display = document.getElementById("display");
list = document.getElementById("list");
reset = document.getElementById("reset");
// display change in value on input changed
slider.addEventListener("input", updateNum, false);
// print Fibonacci Sequence
submit.addEventListener("click", printSequence, false);
// reset Fibonacci Sequence
reset.addEventListener("click", removePrevious, false);
// set inital display value
slider.value = 27;
updateNum();
}
/*
* Fibonacci Sequence (http://en.wikipedia.org/wiki/Fibonacci_number)
*
* The Fibonacci Sequence is a sequence of numbers where each subsequent number
* is the sum of the previous two.
*
* The function below takes in a number n and returns the Fibonacci sequence to
* the nth number.
*/
function fibonacci(n) {
var i, sequence = [1, 1]; // We start our sequence at [1, 1]
for (i = 1; i < n; i++)
sequence.push(sequence[i] + sequence[i - 1]);
return sequence;
}
// Update the slider selection
function updateNum() {
display.innerHTML = slider.value;
console.log("changed");
}
// Display the Fibonacci sequence
function printSequence(e) {
var i, li, textNode, sequence;
// prevent default submit behavior
e.preventDefault();
// remove any previous sequence elements
removePrevious();
// Get Fibonacci sequence
sequence = fibonacci(slider.value);
// Create child <li>'s
for (i = 0; i < slider.value; i++) {
li = document.createElement("li");
// insert next Fibonacci sequence element
textNode = document.createTextNode(sequence[i]);
li.appendChild(textNode);
list.appendChild(li);
// setTimeout delay
setTimeout(function() {
li.classList.add("animation");
}, (i + 1) * 500);
}
console.log("submitted");
}
function removePrevious(e) {
if (e)
e.preventDefault();
while (list.firstChild)
list.removeChild(list.firstChild);
console.log("removed");
}
// add event listener for page load
window.addEventListener("load", init, false);
/* */
})();
.main {
display: block;
width: 300px;
margin: 0 auto;
font-family: 'Roboto', sans-serif;
}
h1 {
font-size: 20px;
}
form {
border: 1px solid #999;
border-radius: 5px;
padding: 20px;
text-align: center;
}
button {
width: 100px;
display: inline-block;
}
.input {
margin: 20px auto;
}
ul li {
opacity: 0;
}
.animation {
transition: opacity .5s ease-in;
opacity: 1.0;
}
<!DOCTYPE html>
<html>
<head>
<title>Fibonacci Sequence</title>
<link rel="stylesheet" type="text/css" href="fibonacci.css">
<link href='http://fonts.googleapis.com/css?family=Roboto:300' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="fibonacci.js"></script>
</head>
<body>
<div class="main">
<form>
<h1>Fibonacci Sequence</h1>
How many numbers in the sequence would you like to calculate?
<br>
<div class="input">
<label for="numbers">Pick a number:</label>
<br>3
<input type="range" name="numbers" id="slider" min="3" max="50" step="1" value="27">50
<br>
<label for="value">Value:</label><span id="display"></span>
<br>
</div>
<button id="submit">Submit</button>
<button id="reset">Reset</button>
</form>
<ul id="list">
</ul>
</div>
</body>
</html>
最佳答案
这是 for
循环和循环内的 setTimeout()
等异步函数的常见问题。
当调用实际超时回调时,li
变量的值将有所不同(无论是什么,它将位于循环的终止值,这就是为什么它只在最后一个li
你创建的)。有多种方法可以解决此问题,即为每次调用 setTimeout()
创建一个闭包或函数来分别包含 li
的当前值。
解决这个问题的一种方法是使用内联 IIFE,它为循环的每次迭代捕获 li
的所需值,如下所示:
for (i = 0; i < slider.value; i++) {
li = document.createElement("li");
// insert next Fibonacci sequence element
textNode = document.createTextNode(sequence[i]);
li.appendChild(textNode);
list.appendChild(li);
// setTimeout delay
// create closure to capture the value of li separately for each iteration
(function(item) {
setTimeout(function() {
item.classList.add("animation");
}, (i + 1) * 500);
})(li);
}
关于javascript - 无法使用 setTimeout() 添加延迟类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30430420/
我正在使用一个简单的脚本来延迟加载页面上的所有图像;图像源的路径包含在 data-src 属性中,然后放入 img 标记的实际 src 属性中。几乎大多数(?)延迟加载方法的实现都是如何工作的。 这是
我有一个具有多层 (SKNodes) 背景、游戏层、前景和 HUD 的场景,每个场景中都有多个 SKSpriteNode,用于滚动和您可以收集和点击的对象。 hud 层只有一个 SKSpriteNod
我有一个 Controller 函数来创建一些东西。调用该函数时,将运行 setInterval 来获取项目的状态。 这是服务: (function () { 'use strict';
在我的应用程序中,我播放音频直播,延迟非常重要。我正在使用 AVPlayer,但启动需要 5-6 秒,并且我需要最多 3 秒的延迟。我怎样才能更快地开始播放并减少延迟?设置一个小缓冲区就可以了?如何使
我有一个恼人的问题。我有这个简单的服务器代码(比方说): #!/usr/bin/env python3 import wsgiref.simple_server def my_func(env, st
我是 jquery deferreds 的新手。这里我有一个简单的example 。 谁能告诉我为什么在其他函数完成之前就触发完成函数(“现在是我的时间”)? 这里的人 example还创建一个延迟对
正在放置关闭 之前的标签标记相同的 sa 将它们放在 中部分并指定 defer="defer"属性? 最佳答案 是/否。 是的,因为放置 defer 标签会等到文档加载完毕后再执行。 否,因为放置
我知道Javascript没有delay(500)方法,它会延迟执行500毫秒,所以我一直试图通过使用setTimeout和setInterval来解决这个问题。 for(var i =0; i< 1
我们有一个读写主服务器和复制的从读服务器。在某些网络用例中,数据被发布并立即读取以发送回服务器。立即读取是在读取从属设备上完成的,由于延迟,数据尚未在那里更新。 我知道这可能是复制设置的一个常见问题,
我有以下 dag 设置以从 2015 年开始运行追赶。对于每个执行日期,任务实例在一分钟内完成。但是,第二天的任务仅在 5 分钟窗口内开始。例如。上午 10:00、上午 10:05、上午 10:10
当我在 WatchKit 中推送一个新 Controller 并在新 Controller 的awakeWithContext: 方法中使用 setTitle 时,它需要一秒钟左右来设置标题,直到
我将图像显示为 SVG 文件和文本。 出于某种原因,svg 图像的渲染速度比屏幕的其余部分慢,从而导致延迟,这对用户体验不利。 这种延迟正常吗?我该怎么做才能让整个屏幕同时呈现? Row( ma
我正在考虑在我的应用程序中使用 firebase 动态链接。我需要将唯一标识符从电子邮件生成的链接传递到用户应用程序中。当用户安装了应用程序时,这可以正常工作,但是,我对未安装应用程序的方式有些困惑。
您知道如何使用 JQuery 的延迟方法和一个函数来检测所有已更改的表单并将每个表单作为 Ajax 帖子提交吗? 如果我只列出大量表单提交,我可以得到同样的结果,但如果我使用... $('form.c
我需要一种方法来通过回调获取不同的脚本。这个方法工作正常: fetchScripts:function() { var _this=this; $.when( $.aj
我编写了一个 jquery 脚本,允许我淡入和淡出 div,然后重复。该代码运行良好。但是,当我尝试添加延迟(我希望 div 在淡出之前保持几秒钟)时,它无法正常工作。我尝试在代码中的几个地方添加延迟
我正在努力在延迟、带宽和吞吐量之间划清界限。 有人可以用简单的术语和简单的例子来解释我吗? 最佳答案 水比喻: 延迟 是穿过管子所需的时间。 带宽是管有多宽。 水流量为吞吐量 车辆类比: 从源到目的地
我有一个 CRM 系统,当添加联系人时,我想将他们添加到会计系统中。 我在 CRM 系统中设置了一个 Webhook,将联系人传递给 Azure 函数。 Azure 函数连接到会计系统 API 并在那
我有一个 Android AudioTrack,例如: private AudioTrack mAudioTrack; int min = AudioTrack.getMinBufferSize(sa
我正在 React 中开发一个 TODO 应用程序,并尝试构建将删除选中项目延迟 X 秒的功能,并且如果在这段时间内未选中该框,它将不会被删除。 我遇到的主要问题是当用户在同一 X 秒内检查、取消检查
我是一名优秀的程序员,十分优秀!