jq之deferred方法

素颜马尾好姑娘i 2022-05-16 05:06 175阅读 0赞

<html>
    
    <script src="./jQuery-min-v3.3.1.js"></script>
    
    
    
    <body>
    
    
    
        <h1 class="click-me">测试jq的$.Deferred()方法</h1>
    
        <p>摘抄于：https://www.cnblogs.com/guoyansi19900907/p/5000267.html</p>
    
    </body>
    
    <script>
    
        (function () {
    
            //目标：先执行when中的方法，再执行done/fail中的内容
    
            //1、
    
            // function delayOne () {
    
            //  setTimeout (function () {
    
            //      console.log('执行啦');
    
            //  }, 2000)
    
            // }
    
            // $.when( delayOne () ).done( function () {
    
            //  console.log('o---yes');
    
            // }).fail( function () {
    
            //  console.log("o---no");
    
            // })
    
            //先执行 'o---yes'； 2s后执行 '执行啦'
    
    
    
            //2、
    
            // var dfd = $.Deferred();
    
            // function delayTwo (dfd) {
    
            //  var flag = true;
    
            //  setTimeout (function () {
    
            //      console.log('执行啦');
    
            //      if (flag) {
    
            //          dfd.resolve ('yes')
    
            //      } else {
    
            //          dfd.reject ('no')
    
            //      }
    
            //  }, 2000)
    
            //  return dfd
    
            // }
    
            // $.when( delayTwo (dfd) ).done( function (value) {
    
            //  console.log('o---yes-->',value);
    
            // }).fail( function () {
    
            //  console.log("o---no--->",value);
    
            // })
    
            // '执行啦' 'o---yes--> yes'
    
            //3、
    
            // var dfd = $.Deferred(); //全局变量
    
            // function delayTwo (dfd) {
    
            //  var flag = true;
    
            //  setTimeout (function () {
    
            //      console.log('执行啦');
    
            //      if (flag) {
    
            //          dfd.resolve ('yes')
    
            //      } else {
    
            //          dfd.reject ('no')
    
            //      }
    
            //  }, 2000)
    
            //  return dfd
    
            // }
    
            // $.when( delayTwo (dfd) ).done( function (value) {
    
            //  console.log('o---yes-->',value);
    
            // }).fail( function () {
    
            //  console.log("o---no--->",value);
    
            // })
    
            // dfd.resolve('捣乱的。。。');
    
            //resolve直接执行done方法；reject直接执行fail方法
    
            // 'o---yes--> 捣乱的。。。' ; 2s后执行 '执行啦'
    
            //4、
    
            // function delayTwo () {
    
            //  var dfd = $.Deferred(); //局部变量
    
            //  var flag = true;
    
            //  setTimeout (function () {
    
            //      console.log('执行啦');
    
            //      if (flag) {
    
            //          dfd.resolve ('yes')
    
            //      } else {
    
            //          dfd.reject ('no')
    
            //      }
    
            //  }, 2000)
    
            //  return dfd
    
            // }
    
            // $.when( delayTwo () ).done( function (value) {
    
            //  console.log('o---yes-->',value);
    
            // }).fail( function () {
    
            //  console.log("o---no--->",value);
    
            // })
    
            // '执行啦' 'o---yes--> yes'
    
            //5、
    
            // function delay() {
    
            //  var dfd = $.Deferred();
    
            //  var bool = true;
    
            //  setTimeout(function () {
    
            //      console.log("delay的setTimeout执行啦!");
    
            //      if (bool) {
    
            //          dfd.resolve("done");
    
            //      } else {
    
            //          dfd.reject("fail");
    
            //      }
    
            //  }, 2000);
    
            //  return dfd;
    
            // }
    
            // var delay2 = delay();
    
            // delay2.resolve();
    
            // $.when(delay()).done(function (value) {
    
            //  console.log('o---yes-->',value);
    
            // }).fail(function (value) {
    
            //  console.log("o---no--->",value);
    
            // });
    
            //2s后执行： delay的setTimeout执行啦! delay的setTimeout执行啦! o---yes--> done
    
            //6、
    
            // function delay() {
    
            //  var dfd = $.Deferred();
    
            //  var bool = true;
    
            //  setTimeout(function () {
    
            //      console.log("delay的setTimeout执行啦!");
    
            //      if (bool) {
    
            //          dfd.resolve("done");
    
            //      } else {
    
            //          dfd.reject("fail");
    
            //      }
    
            //  }, 2000);
    
            //  return dfd.promise ();
    
            // }
    
            // var delay2 = delay();
    
            // delay2.resolve();
    
            // $.when(delay()).done(function (value) {
    
            //  console.log('o---yes-->',value);
    
            // }).fail(function (value) {
    
            //  console.log("o---no--->",value);
    
            // });
    
            //报错
    
            //7、更改
    
            function delay(time) {
    
                return $.Deferred (function (dfd) {
    
                    setTimeout ( function () {
    
                        console.log('setTimeout执行了');
    
                        dfd.resolve()
    
                    }, time)
    
                })
    
            }
    
            delay (3000).done( function () {
    
                console.log('done');
    
            })
    
        })()
    
    </script>
    
    
    
    </html>