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

目录
相关文章
|
6月前
|
JavaScript 前端开发
如何处理 Vue 中的异步操作和 Promise?
如何处理 Vue 中的异步操作和 Promise?
138 1
|
前端开发
10 # promise2 状态的处理
10 # promise2 状态的处理
61 0
|
29天前
|
JavaScript 前端开发
useEffect 钩子中可以执行哪些操作?
【10月更文挑战第20天】`useEffect` 是 React 中非常重要的一个钩子,它允许我们在函数组件的渲染过程中执行一些副作用操作。在 `useEffect` 中,我们可以进行各种各样的操作,以满足不同的需求。
15 6
|
5月前
|
JavaScript 前端开发
vue实现循环发起多个异步请求——Promise.all()与Promise.race()
vue实现循环发起多个异步请求——Promise.all()与Promise.race()
328 1
|
4月前
|
JavaScript
JS【详解】setTimeout 延时(含清除 setTimeout,计时开始时间,0 秒延时解析,多 setTimeout 执行顺序,setTimeout 应用场景,网红面试题)
JS【详解】setTimeout 延时(含清除 setTimeout,计时开始时间,0 秒延时解析,多 setTimeout 执行顺序,setTimeout 应用场景,网红面试题)
938 0
|
JavaScript
Vue中 使用定时器 (setInterval、setTimeout)
Vue中 使用定时器 (setInterval、setTimeout)
182 0
|
6月前
|
JavaScript API
在使用$nextTick方法时,需要注意哪些问题?
在使用$nextTick方法时,需要注意哪些问题?
46 0
|
6月前
|
JavaScript
vue 定时器:setInterval和setTimeout使用实例及区别
vue 定时器:setInterval和setTimeout使用实例及区别
128 0
|
6月前
|
前端开发 JavaScript
使用promise解决异步请求的用法
使用promise解决异步请求的用法
93 0
|
JavaScript
js中两种定时器,setTimeout和setInterval的区别
js中两种定时器,setTimeout和setInterval的区别
85 0