如何用原生JS實現一個簡單的promise

阿新 • • 發佈：2018-11-03

　　　我又又又回來了，最近真是累的跟狗一樣，急需一個大保健回覆一下子精力

　　　我現在是一邊喝著紅牛一邊寫著部落格，好了好了，不扯了，迴歸整體好吧

　　　先簡單來說一下啥是promise吧

　　　它是什麼？Promise是一個方案，用來解決多層回撥巢狀的解決方案。它現在是ES6的原生物件。

　　幹嘛用的？可以把一個多層巢狀的同步、非同步都有回撥的方法，給拉直為一串.then()組成的呼叫鏈。

　　　解決啥問題？多層巢狀的回撥方法中，如果同時存在同步、非同步的方法，那麼實際執行順序會混亂。不好除錯不好維護

　　　現在我們再來說一說自己寫簡單的promise的思路，我們是如何將非同步函式同步執行的呢，正常情況下，我們只需要用函式

　　　巢狀就可以解決，但是現在我們要封裝一個promise，那我們要怎麼做呢，其實原理還是一樣的，只要能在第一個函式執行完

　　　再呼叫下一個函式不就可以了嘛

　　　下面還是直接上程式碼

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script>
        function 
 MyPromise(func) {
            var self = this;
            var count = 0;
            this.cbklist = [];
            this.then = function (callback) {
                //將所有.then方法傳進來的引數push到陣列當中
                this.cbklist.push(callback);
                //能實現鏈式呼叫的關鍵
                return this;
            }
             
this.success = function () {
                //使用遞迴呼叫自身
                if (count == self.cbklist.length) return;
                self.cbklist[count++](self.success);

            }
            //進來時呼叫第一個函式
            func(self.success);
        }


        // 下面是呼叫的例子
        function ajaxA(success) {
            setTimeout(function () {
                console.log("AAAAAAAAAA");
                success();
            }, 3000);
        }

        function ajaxB(success) {
            setTimeout(function () {
                console.log("BBBBBBBBBB");
                success();
            }, 2000);
        }

        function ajaxC(success) {
            setTimeout(function () {
                console.log("CCCCCCCCCC");
                success();
            }, 6000);
        }

        function ajaxD() {
            setTimeout(function () {
                console.log("DDDDDDDDD");
            }, 2000);
        }
        new MyPromise(ajaxA).then(ajaxB).then(ajaxC).then(ajaxD);
    </script>
</body>

</html>

如何用原生JS實現一個簡單的promise

　　　我又又又回來了，最近真是累的跟狗一樣，急需一個大保健回覆一下子精力　　　我現在是一邊喝著紅牛一邊寫著部落格，好了好了，不扯了，迴歸整體好吧　　　先簡單來說一下啥是promise吧　　　它是什麼？Promise是一個方案，用來解決多層回撥巢狀的解決方案。它現在是ES6的原生物件。　　 &n

用js實現一個簡單的mvvm

這裡利用的object.defineproperty() 方法; <input id='input'><p id='p'><p/>js: const data={}; const input=documen

用JS實現一個簡單的加減購物車效果

1.書寫input輸入框作為加減實現的效果。 2.加減按鈕用button按鈕來實現 3.利用js控制i的值作為輸入框中的值。實現的效果：完整程式碼如下： <!DOCTYPE html> <html> <head>

用原生js實現ajax、jsonp

原生js 斜杠 lang settime 發送數據 tro upper 類型之前一、原生js實現ajax $.ajax({ url: ‘‘, type: ‘post‘, data: {name: ‘zhaobao‘, age: 20}, dataTy

原生js做一個簡單的進度條

-i 隨機數函數 borde setw bubuko 原生 html 進度條 add 用原生js做進度條，布局非常簡單，一個盒子裏放一個span標簽，讓它的寬度為0，並且轉成塊元素。主要用定時器動態增加span的寬度，並且當它的寬度大於父級盒子的寬度的時候停止效果如下：

用原生JS&PHP簡單的AJAX實例

show passwd script pos ner ID title 服務器端更改功能介紹： 1）file.html 使用 xmlhttp 請求服務器端文件 text ，並更新 file.html 的部分內容 2）update.html 使用 xmlhttp 通過 f

原生js實現一個DIV的碰撞反彈運動

絕對定位 doc type har tle ntb inpu wid PE 原生js實現一個DIV的碰撞反彈運動：　　關鍵在於DIV的邊界檢測，進而改變運動方向，即可實現碰撞反彈效果。 <!DOCTYPE html> <html

用原生JS實現多張圖片上傳及預覽功能（相容IE8）

最近需要做一個圖片上傳預覽的功能（相容IE8-11、chrome、firefox等瀏覽器），網上現有的檔案上傳元件（如webuploader）總是會遇到一些相容性問題。於是我參考了一些博文（連結找不到了⊙o⊙…），自己用原生JS寫了一個支援多張圖片上傳預覽功能的Demo 先通過最終效果看一下功能：

原生JS實現一個完整的輪播圖

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=d

JS實現一個簡單的輪播圖

主要程式碼如下： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" conte

用c語言實現一個簡單的通訊錄

通訊錄的c語言實現原始碼簡單通訊錄的實現還是包括三個原始檔，test.c（實現通訊錄主邏輯），txl.c（實現用到的各個函式），txl.h（存放txl中用到的各種標頭檔案與宣告）。 txl.h #ifndef __TXL_H__//**txl.h** #defi

原生js實現一個自定義下拉單選選擇框

　　瀏覽器自帶的原生下拉框不太美觀，而且各個瀏覽器表現也不一致，UI一般給的下拉框也是和原生的下拉框差別比較大的，這就需要自己寫一個基本功能的下拉選單/下拉選擇框了。最近，把專案中用到的下拉框元件重新封裝了一下，以建構函式的方式進行封裝，主要方法和事件定義在原型上，下面是主要的實現程式碼並添加了比較詳細的註釋

JavaScript：用原生js實現重力條件下，可拖拽小球的碰撞運動

本次用原生js，在小球的碰撞運動上添加了重力效應。並且可以拖拽小球，拖拽的方向和力度大小，決定了小球的初始速度和運動方向蠻有趣的，大家可以拷貝程式碼試一試。程式碼也附帶了一些小注釋。 <!DOCTYPE html> <html lang="en"> &l

用純numpy實現一個簡單的神經網路（理解）

簡單的一個numpy神經網路示例： import numpy as np class NeuralNetwork(): def __init__(self): #將權重轉換為3×1矩陣，其值從-1到1，平均值為0 self.synaptic_we

用原生Node實現一個靜態web伺服器

之前一直用過Apache nginx等靜態web伺服器。但強大的node.js本身就能作為獨立的web伺服器，不依賴與Apache nginx 下面我們看看怎麼用Node去寫一個靜態伺服器吧首先，先來看看我的專案結構吧

(3) 用java編譯器實現一個簡單的編譯器-語法分析

轉載地址：http://blog.csdn.net/tyler_download/article/details/50708807 視訊地址：http://study.163.com/course/courseLearn.htm?courseId=1002830012#/l

用Python socket實現一個簡單的http伺服器（post 與get 的區別）、CGIHTTPServer 簡單應用

#!/usr/bin/env python #coding=utf-8import socketimport re HOST = '' PORT = 8000#Read index.html, put into HTTP response dataindex_content = '''HTTP/1.x 200

用原生JS實現圖片輪播切換功能

效果如圖：程式碼如下：<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title

用原生js實現輪播圖

今天分享一下簡單的輪播圖製作過程，用原生js實現。雖然網上有各種外掛製作的高大上又好用的輪播圖，但還是要清楚它的基本原理。 1.基本原理將所有圖片並排放到一個div中，然後再放到展示視窗當中，讓裝有所有圖片的div通過改變left值，從而左右移動實現圖片切換。 2.htm

自己做工具--用原生js封裝一個AJAX外掛

採用面向物件的思想封裝,相容get/post方式 1.get和post區別（1）get方式通過url位址列傳遞引數，post通過表單形式傳遞資料（2）傳輸的資料大小，get方式：普通瀏覽器只能傳輸2K資料，chrome瀏覽器傳輸8K，post方式：原則上不受限制，但

如何用原生JS實現一個簡單的promise

相關推薦