promise间隔时间添加dom

简介: var oUl = document.querySelector("ul"); var oBtn = document.querySelector("input"); var count = 0; var timer = null; ...
<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
  <input type="button" value="添加">
<ul></ul>
<script>
    var oUl = document.querySelector("ul");
    var oBtn = document.querySelector("input");
    var count = 0;
    var timer = null;
    function createDom() {
        var oLi = document.createElement("li");
        oLi.innerHTML = count++;
        oUl.appendChild(oLi);
    }
    var addDom = (function () {
        return new Promise(function (resolve, reject) {
            resolve(createDom);
        });
    })();
    oBtn.onclick = function () {
        timer = setInterval(function () {
            if (count == 10) {
                clearInterval(timer);
            } else {
                addDom.then(function (fn) {
                    fn();
                });
            }
        }, 1000);
    }
</script>
</body>
</html>

  promise 的基本用法

目录
相关文章
|
前端开发
10 # promise2 状态的处理
10 # promise2 状态的处理
72 0
|
7月前
|
JavaScript 前端开发
vue实现循环发起多个异步请求——Promise.all()与Promise.race()
vue实现循环发起多个异步请求——Promise.all()与Promise.race()
358 1
|
JavaScript
Vue中 使用定时器 (setInterval、setTimeout)
Vue中 使用定时器 (setInterval、setTimeout)
202 0
|
6月前
|
JavaScript
JS【详解】setTimeout 延时(含清除 setTimeout,计时开始时间,0 秒延时解析,多 setTimeout 执行顺序,setTimeout 应用场景,网红面试题)
JS【详解】setTimeout 延时(含清除 setTimeout,计时开始时间,0 秒延时解析,多 setTimeout 执行顺序,setTimeout 应用场景,网红面试题)
1356 0
|
8月前
|
JavaScript
vue 定时器:setInterval和setTimeout使用实例及区别
vue 定时器:setInterval和setTimeout使用实例及区别
165 0
|
缓存 前端开发
React在定时器中无法获取状态最新值
React在定时器中无法获取状态最新值问题解决记录
207 1
|
缓存 JavaScript
vue中使用setInterval()循环定时器的注意事项
vue中使用setInterval()循环定时器的注意事项
461 0
16、计时器方法2(setTimeout、clearTimeout、防抖、节流)
16、计时器方法2(setTimeout、clearTimeout、防抖、节流)
125 0
|
JavaScript API
MutationObserver - 监听你的 DOM 是否有变动
MutationObserver 可用来监视 DOM 的变化,算是一个比较老的 API,但是却鲜为人知,他的前身是 MutationEvent:一系列监听 DOM 变更的 event 事件 - DOMAttrModified、DOMNodeInserted、DOMSubtreeModified 等。
|
前端开发 小程序
09 React每隔0.2s颜色变淡 之settimeOut变成setInterval
09 React每隔0.2s颜色变淡 之settimeOut变成setInterval