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 的基本用法

目录
相关文章
|
5月前
|
JavaScript 前端开发
如何处理 Vue 中的异步操作和 Promise?
如何处理 Vue 中的异步操作和 Promise?
130 1
|
5月前
|
Web App开发 前端开发 JavaScript
React 之 requestAnimationFrame 执行机制探索
React 之 requestAnimationFrame 执行机制探索
229 0
|
5月前
|
存储 JavaScript 前端开发
揭秘Vue 2中的$nextTick:等待DOM更新的神奇时刻!
揭秘Vue 2中的$nextTick:等待DOM更新的神奇时刻!
|
3月前
|
前端开发
useEffect问题之为什么使用useEffect来在props改变时重置state是低效的
useEffect问题之为什么使用useEffect来在props改变时重置state是低效的
|
4月前
|
JavaScript 前端开发
vue实现循环发起多个异步请求——Promise.all()与Promise.race()
vue实现循环发起多个异步请求——Promise.all()与Promise.race()
233 1
|
3月前
|
JavaScript
JS【详解】setTimeout 延时(含清除 setTimeout,计时开始时间,0 秒延时解析,多 setTimeout 执行顺序,setTimeout 应用场景,网红面试题)
JS【详解】setTimeout 延时(含清除 setTimeout,计时开始时间,0 秒延时解析,多 setTimeout 执行顺序,setTimeout 应用场景,网红面试题)
671 0
|
5月前
|
JavaScript API
在使用$nextTick方法时,需要注意哪些问题?
在使用$nextTick方法时,需要注意哪些问题?
41 0
|
5月前
|
JavaScript
vue 定时器:setInterval和setTimeout使用实例及区别
vue 定时器:setInterval和setTimeout使用实例及区别
108 0
|
人工智能 自然语言处理 JavaScript
$nextTick与原生js先渲染dom再执行函数的方式
$nextTick与原生js先渲染dom再执行函数的方式
140 0
|
前端开发 JavaScript
React render 的原理和触发时机
React render 的原理和触发时机
151 0