promise實現公共彈框元件（非同步回撥）

阿新 • • 發佈：2019-01-21

情景再現：

1、使用者點選按鈕，彈出確認窗體

2、使用者確認和取消有不同的處理

解決方案：

1、採用ES6的promise語法，實現非同步回撥（jquery3.0以後支援）

2、案例樣式採用bootstrap

上程式碼：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>confirm重寫</title>
        <link rel="stylesheet" href="bootstrap3.3.5.min.css" />
        <style type="text/css">
            .console-show {
                margin-top: 200px;
                background-color: red;
                color: white;
            }
        </style>
    </head>

    <body>
        <div class="text-center">
            <h1>confirm重寫</h1>
            <button type="button" class="btn btn-info" id="confirmBtn">Confirm</button>
            <button type="button" class="btn btn-danger" id="alertBtn">Alert</button>
            <div class="console-show"></div>
        </div>
        <!--下面是模態框-->
        <div class="modal fade" id="alertModal">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
                        <h4 class="modal-title"></h4>
                    </div>
                    <div class="modal-body">
                        <p></p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger sureBtn" data-dismiss="modal">確定</button>
                    </div>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
        </div>
        <!-- /.modal -->

        <!--下面是模態框-->
        <div class="modal fade" id="confirmModal">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
                        <h4 class="modal-title"></h4>
                    </div>
                    <div class="modal-body">
                        <p></p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default cancelBtn" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-danger sureBtn" data-dismiss="modal">確定</button>
                    </div>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
        </div>
        <!-- /.modal -->
    </body>
    <script src="jquery-3.3.1.min.js"></script>
    <script src="bootstrap-3.3.5.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        function ReAlert(title, content) {
            var alertPromise = new Promise(function(resolve, reject){
                $('#alertModal .modal-title').text(title);
                $('#alertModal .modal-body p').text(content);
                $('#alertModal').modal('show');
                $('#alertModal .sureBtn').off('click').click(function() {
                    resolve(content);
                })
            })
            return alertPromise;
        };


        function ReConfirm(title, content) {
            var confirmPromise = new Promise(function(resolve, reject){
                $('#confirmModal .modal-title').text(title);
                $('#confirmModal .modal-body p').text(content);
                $('#confirmModal').modal('show');
                $('#confirmModal .sureBtn').off('click').click(resolve);
                $('#confirmModal .cancelBtn').off('click').click(reject);
            })
            return confirmPromise;
        };

        $('#alertBtn').click(function() {
            ReAlert('提示', '確定加入索尼大法？').then(function(str){
                console.log(str);
                $('.console-show').text('Prmoise_alert頁面點選"確定"');
            })
        });

        $('#confirmBtn').click(function() {
            ReConfirm("警告", '確認退出索尼教？').then(function(){
                console.log('確定被點選，執行後續操作');
                $('.console-show').text('Promise_resolve_confirm頁面點選"確定"');
            },function(){
                console.log("取消被點選，返回之前的操作");
                $('.console-show').text('Promise_reject_confirm頁面點選"取消"');
            })
        })
    </script>

</html>

promise實現公共彈框元件（非同步回撥）

情景再現： 1、使用者點選按鈕，彈出確認窗體 2、使用者確認和取消有不同的處理解決方案： 1、採用ES6的promise語法，實現非同步回撥（jquery3.0以後支援） 2、案例樣式採用bootstrap上程式碼：&

Promise原理講解 async+await應用（非同步回撥解決方案）

1.非同步程式設計在JavaScript的世界中，所有程式碼都是單線執行的。由於這個“缺陷”，導致JavaScript的所有網路操作，瀏覽器事件，都必須是非同步執行。非同步執行可以用: 回撥函式釋出訂閱觀察者模式 promise 1.1.回撥函式 function call(id, c

C# 委託的三種呼叫示例（同步呼叫、非同步呼叫、非同步回撥）

首先，通過程式碼定義一個委託和下面三個示例將要呼叫的方法：程式碼如下: public delegate int AddHandler(int a,int b); public class 加法類 { public static int A

SpringBoot使用Async註解失效分析、解決（spring非同步回撥）

原創專注JavaWeb開發 2018-12-24 17:30:33 Spring中@Async 在Java應用中，絕大多數情況下都是通過同步的方式來實現互動處理的；但是在處理與第三方系統互動的時候，容易造成響應遲緩的情況，之前大部分都是使用多執行緒來完成此類任務，其實，

ES6/7/8新特性Promise,async,await,fetch帶我們逃離非同步回撥的深淵

Promise: 在ES6以前如果我們需要在js中進行非同步處理，大多數都是通過使用回撥函式的方式來解決問題，如果簡單的非同步處理，回撥函式的方式看起來還是比較優雅的，逼格還有點高，但是如果非同步操作很多，回撥巢狀就很深，程式碼看起來就會特別彆扭，維護起來成本也會變高這個時候

JQuery 基礎案例（3）—— jQuery實現輪播圖無縫（無回滾）滾動切換效果

輪播圖無縫滾動切換原理基本框架 <div class="slide">  <ul class="slide-nav"> <li class="activ

python中的Redis鍵空間通知（過期回撥）

介紹 Redis是一個記憶體資料結構儲存庫，用於快取，高速資料攝取，處理訊息佇列，分散式鎖定等等。使用Redis優於其他記憶體儲存的優點是Redis提供永續性和資料結構，如列表，集合，有序集和雜湊。在本文中，我想簡要介紹一下Redis鍵空間通知。我將解釋鍵空間通知是什麼，並演示如何配置Redis以接

RecyView+條目點選（介面回撥）

1，佈局檔案 <android.support.v7.widget.RecyclerView android:id="@+id/recy" android:layout_width="match_parent" android:layout_height="

url獲取資料介面呼叫方法+自定義顯示（介面回撥）

呼叫方法 new MyTask(new MyTask.Icallbacks(){})；//生成返回值myTask.execute("地址");//介面設定 public class MyNetTask

Vue 自定義彈出框元件（類似淘寶選擇規格）

底部選擇實現效果 1.彈出效果新增動畫 2.直接呼叫元件，呼叫方法為： <select-rules ref="colorSelect" :price="price" :mainPic="mianUrl" @getCartNum="getC

Vue非典型封裝Bootstrap-Select公共元件（非同步獲取資料，prop自定義函式）

本文重點討論的問題： 1. 如何統一所有例項資料，而不是例項化元件時傳入資料。並非提倡這種做法，結合實際需求。 2. 如何prop元件例項的自定義函式。以上問題比較鮮見，於是把我的解決思路寫下來跟各位分享。完整具體的實現程式碼就不列出了。接觸VUE

web彈框/層（layer ）的使用

pan PE sync 錯誤背景 div 語句 eal 關閉首先引入：layer.css和layer.js 基本使用： $.ajax({ type : "post", url : ‘路徑‘, async:fa

HTML5學習第6篇—video：自己實現video的播放控制元件（新增樣式版）

本篇部落格接著上一篇文章，實現了一個帶樣式的video播放控制元件，程式碼如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

Unity+Slua實現遊戲常用UI元件（六）——單（多）元素滾動佈局元件

單元素滾動佈局元件——LSIScrollView 定義單元素滾動佈局元件下只有一種元素，支援元素自動佈局並在滾動過程中元素複用元件效果展示 LSIScrollView效果展示 LSIScrollView元素複用特性建立滿足Mask顯示的最小

html頁面js實現頁面彈框

1、按鈕 <a class="button border-green button-little" onclick="javasrcipt:ShowDiv('MyDiv','fade')" &g

Vue.js實現數字輸入框元件

index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>數字輸入框元件</title> <

使用Promise實現微信官方提供的非同步API同步化

小程式開發工具原生支援 ES6 的 Promise（大部分情況不用另外安裝 es6-promise 包）。特殊場景自己要載入的話也可以用 npm 的 es6-promise 包。下載 es6-promise-min.js 或 es6-promise.js 置於根目錄下

VUE2.0增刪改查附編輯新增model(彈框)元件共用

Vue實戰篇（增刪改查附編輯新增model(彈框)元件共用）前言最近一直在學習Vue,發現一份crud不錯的原始碼預覽連結 https://taylorchen709.github.

js實現頁面彈框效果

很多開始學程式設計的小夥伴都覺得想要給某些功能加一個彈框效果，但是覺得自己做起來有很吃力，今天給大家推薦一個方法，也是無意間在網上看見，覺得不錯。廢話不多說，我們來開始做吧 <!DOCTYPE html PUBLIC "-//W3C//DTD XHT

Android ListView的應用（如何去實現ListView控制元件（自定義介面卡））

稀稀拉拉學了有快1年的Android了，但是依然跟剛入門的小白一樣，用到啥學啥，上網查別人的程式碼，然後複製貼上過去，最後什麼都沒學到，現在是深有體會，我希望記錄一些知識點，踏踏實實的走好每一步，希望剛入門的小白能用到。首先Android Studio中有許多系統自帶的空間，

promise實現公共彈框元件（非同步回撥）

相關推薦