面試題:沒有es6老項目,如何用jq解決異步的問題?

咱們都知道es6提供了promise異步寫法,可是大部分的公司都是jq寫的,那咱們如何用Jq來寫和promise異步同樣的寫法呢?這個知道的人很少下面咱們就來寫寫把

注意:
1 JQ 1.5以上
2 關鍵api: $.Deferred()javascript

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p>deferred test</p>

    <script src="https://cdn.bootcss.com/jquery/3.2.0/jquery.min.js"></script>
    <script type="text/javascript">
        
        // var wait = function () {
        //     var task = function () {
        //         console.log('執行完成')
        //     }
        //     setTimeout(task, 2000)
        // }
        // wait()

        // 已經封裝好的(A 員工)
        function waitHandle() {
            // 定義
            var dtd = $.Deferred()
            var wait = function (dtd) {
                var task = function () {
                    console.log('執行完成')
                    // 成功
                    dtd.resolve()
                    // 失敗
                    // dtd.reject()
                }
                setTimeout(task, 1000)
                // wait 返回
                return dtd.promise()
            }
            // 最終返回
            return wait(dtd)
        }

        // 使用(B 員工)
        var w = waitHandle()  // promise 對象
        $.when(w).then(function () {
            console.log('ok 1')
        }, function () {
            console.log('err 1')
        })

    </script>
</body>
</html>

這樣就可使用了,其實promise的前身就是jq的deffered,封裝好以後用法差很少,es6把他規範化了而已css

相關文章
相關標籤/搜索