首页新闻找找看学习计划

一个关于函数执行顺序(暂停,等待)问题?还请各位大神指教..

0
悬赏园豆:20 [已解决问题] 解决于 2017-04-21 10:27

问题描述:

0.有个全局变量a(默认为false,这个应该是没有关系的);

1.一个点击按钮,点击这个按钮有个点击事件;

2.点击事件触发后出现一个弹框;弹框上有确定/取消按钮;

3.我想在点击弹出框的确定按钮的时候;让变量a的值变成true;取消的时候变成false;

4.最后输出变量a;

问题来了;button的点击事件触发之后,还没等我点击弹出的确定或者取消按钮;

控制台直接打印出来了a的初始值false(这里我设置的是false)

5.这里我贴出代码:为了各位大神的方便,我把插件的css和js直接放在了html里面;

所以文件看起来比较长;真正的逻辑部分20行;希望各位大神耐心教导,不胜感激...

(在代码的270行开始;往后的20行)

复制代码
  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Title</title>
  6 </head>
  7 <style>
  8     .alertify,
  9     .alertify-show,
 10     .alertify-log {
 11         -webkit-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
 12         -moz-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
 13         -ms-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
 14         -o-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
 15         transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
 16         /* easeOutBack */
 17     }
 18     
 19     .alertify-hide {
 20         -webkit-transition: all 250ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
 21         -moz-transition: all 250ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
 22         -ms-transition: all 250ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
 23         -o-transition: all 250ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
 24         transition: all 250ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
 25         /* easeInBack */
 26     }
 27     
 28     .alertify-log-hide {
 29         -webkit-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
 30         -moz-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
 31         -ms-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
 32         -o-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
 33         transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
 34         /* easeInBack */
 35     }
 36     
 37     .alertify-cover {
 38         position: fixed;
 39         z-index: 99999;
 40         top: 0;
 41         right: 0;
 42         bottom: 0;
 43         left: 0;
 44         background-color: white;
 45         filter: alpha(opacity=0);
 46         opacity: 0;
 47     }
 48     
 49     .alertify-cover-hidden {
 50         display: none;
 51     }
 52     
 53     .alertify {
 54         position: fixed;
 55         z-index: 99999;
 56         top: 50px;
 57         left: 50%;
 58         width: 550px;
 59         margin-left: -275px;
 60         opacity: 1;
 61     }
 62     
 63     .alertify-hidden {
 64         -webkit-transform: translate(0, -150px);
 65         -moz-transform: translate(0, -150px);
 66         -ms-transform: translate(0, -150px);
 67         -o-transform: translate(0, -150px);
 68         transform: translate(0, -150px);
 69         opacity: 0;
 70         display: none;
 71     }
 72     /* overwrite display: none; for everything except IE6-8 */
 73     
 74     :root *>.alertify-hidden {
 75         display: block;
 76         visibility: hidden;
 77     }
 78     
 79     .alertify-logs {
 80         position: fixed;
 81         z-index: 5000;
 82         bottom: 10px;
 83         right: 10px;
 84         width: 300px;
 85     }
 86     
 87     .alertify-logs-hidden {
 88         display: none;
 89     }
 90     
 91     .alertify-log {
 92         display: block;
 93         margin-top: 10px;
 94         position: relative;
 95         right: -300px;
 96         opacity: 0;
 97     }
 98     
 99     .alertify-log-show {
100         right: 0;
101         opacity: 1;
102     }
103     
104     .alertify-log-hide {
105         -webkit-transform: translate(300px, 0);
106         -moz-transform: translate(300px, 0);
107         -ms-transform: translate(300px, 0);
108         -o-transform: translate(300px, 0);
109         transform: translate(300px, 0);
110         opacity: 0;
111     }
112     
113     .alertify-dialog {
114         padding: 25px;
115     }
116     
117     .alertify-resetFocus {
118         border: 0;
119         clip: rect(0 0 0 0);
120         height: 1px;
121         margin: -1px;
122         overflow: hidden;
123         padding: 0;
124         position: absolute;
125         width: 1px;
126     }
127     
128     .alertify-inner {
129         text-align: center;
130     }
131     
132     .alertify-text {
133         margin-bottom: 15px;
134         width: 100%;
135         -webkit-box-sizing: border-box;
136         -moz-box-sizing: border-box;
137         box-sizing: border-box;
138         font-size: 100%;
139     }
140     
141     .alertify-buttons {}
142     
143     .alertify-button,
144     .alertify-button:hover,
145     .alertify-button:active,
146     .alertify-button:visited {
147         background: none;
148         text-decoration: none;
149         border: none;
150         /* line-height and font-size for input button */
151         line-height: 1.5;
152         font-size: 100%;
153         display: inline-block;
154         cursor: pointer;
155         margin-left: 5px;
156     }
157     
158     @media only screen and (max-width: 680px) {
159         .alertify,
160         .alertify-logs {
161             width: 90%;
162             -webkit-box-sizing: border-box;
163             -moz-box-sizing: border-box;
164             box-sizing: border-box;
165         }
166         .alertify {
167             left: 5%;
168             margin: 0;
169         }
170     }
171     /**
172  * Default Look and Feel
173  */
174     
175     .alertify,
176     .alertify-log {
177         font-family: sans-serif;
178     }
179     
180     .alertify {
181         background: #FFF;
182         border: 10px solid #333;
183         /* browsers that don't support rgba */
184         border: 10px solid rgba(0, 0, 0, .7);
185         border-radius: 8px;
186         box-shadow: 0 3px 3px rgba(0, 0, 0, .3);
187         -webkit-background-clip: padding;
188         /* Safari 4? Chrome 6? */
189         -moz-background-clip: padding;
190         /* Firefox 3.6 */
191         background-clip: padding-box;
192         /* Firefox 4, Safari 5, Opera 10, IE 9 */
193     }
194     
195     .alertify-text {
196         border: 1px solid #CCC;
197         padding: 10px;
198         border-radius: 4px;
199     }
200     
201     .alertify-button {
202         border-radius: 4px;
203         color: #FFF;
204         font-weight: bold;
205         padding: 6px 15px;
206         text-decoration: none;
207         text-shadow: 1px 1px 0 rgba(0, 0, 0, .5);
208         box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, .5);
209         background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
210         background-image: -moz-linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
211         background-image: -ms-linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
212         background-image: -o-linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
213         background-image: linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
214     }
215     
216     .alertify-button:hover,
217     .alertify-button:focus {
218         outline: none;
219         background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0));
220         background-image: -moz-linear-gradient(top, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0));
221         background-image: -ms-linear-gradient(top, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0));
222         background-image: -o-linear-gradient(top, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0));
223         background-image: linear-gradient(top, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0));
224     }
225     
226     .alertify-button:focus {
227         box-shadow: 0 0 15px #2B72D5;
228     }
229     
230     .alertify-button:active {
231         position: relative;
232         box-shadow: inset 0 2px 4px rgba(0, 0, 0, .15), 0 1px 2px rgba(0, 0, 0, .05);
233     }
234     
235     .alertify-button-cancel,
236     .alertify-button-cancel:hover,
237     .alertify-button-cancel:focus {
238         background-color: #FE1A00;
239         border: 1px solid #D83526;
240     }
241     
242     .alertify-button-ok,
243     .alertify-button-ok:hover,
244     .alertify-button-ok:focus {
245         background-color: #5CB811;
246         border: 1px solid #3B7808;
247     }
248     
249     .alertify-log {
250         background: #1F1F1F;
251         background: rgba(0, 0, 0, .9);
252         padding: 15px;
253         border-radius: 4px;
254         color: #FFF;
255         text-shadow: -1px -1px 0 rgba(0, 0, 0, .5);
256     }
257     
258     .alertify-log-error {
259         background: #FE1A00;
260         background: rgba(254, 26, 0, .9);
261     }
262     
263     .alertify-log-success {
264         background: #5CB811;
265         background: rgba(92, 184, 17, .9);
266     }
267 </style>
268 
269 <body>
270     <button class="btn">点击</button>
271 </body>
272 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
273 <script>
274     //这个是插件的初始化
275     function reset() {
276         alertify.set({
277             labels: {
278                 ok: "确定",
279                 cancel: "取消"
280             },
281             delay: 5000,
282             buttonReverse: false,
283             buttonFocus: "ok"
284         });
285     }
286     //这个变量a是要展现的结果
287     var a = false;
288     $('.btn').click(function () {
289         //这两行不用管
290         reset();
291         var message = "<h3>Confirm Dialog</h3><p>Do you want to confirm this?</p><br/>";
292         //这个弹出之后会有确定或者取消,想让a的值随着点击的不同而不同
293         alertify.confirm(message, function (e) {
294             if (e) {
295                 alertify.success("You clicked <strong>OK</strong>");
296                 a = true;
297             } else {
298                 a = false;
299                 alertify.error("You clicked <strong>Cancel</strong>");
300             }
301         });
302         console.log(a);
303     });
304 </script>
305 <script>
306     /*! alertify - v0.3.11 - 2013-10-08 */
307 !function(a,b){"use strict";var c,d=a.document;c=function(){var c,e,f,g,h,i,j,k,l,m,n,o,p,q={},r={},s=!1,t={ENTER:13,ESC:27,SPACE:32},u=[];return r={buttons:{holder:'<nav class="alertify-buttons">{{buttons}}</nav>',submit:'<button type="submit" class="alertify-button alertify-button-ok" id="alertify-ok">{{ok}}</button>',ok:'<button class="alertify-button alertify-button-ok" id="alertify-ok">{{ok}}</button>',cancel:'<button class="alertify-button alertify-button-cancel" id="alertify-cancel">{{cancel}}</button>'},input:'<div class="alertify-text-wrapper"><input type="text" class="alertify-text" id="alertify-text"></div>',message:'<p class="alertify-message">{{message}}</p>',log:'<article class="alertify-log{{class}}">{{message}}</article>'},p=function(){var a,c,e=!1,f=d.createElement("fakeelement"),g={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"otransitionend",transition:"transitionend"};for(a in g)if(f.style[a]!==b){c=g[a],e=!0;break}return{type:c,supported:e}},c=function(a){return d.getElementById(a)},q={labels:{ok:"OK",cancel:"Cancel"},delay:5e3,buttonReverse:!1,buttonFocus:"ok",transition:b,addListeners:function(a){var b,c,i,j,k,l="undefined"!=typeof f,m="undefined"!=typeof e,n="undefined"!=typeof o,p="",q=this;b=function(b){return"undefined"!=typeof b.preventDefault&&b.preventDefault(),i(b),"undefined"!=typeof o&&(p=o.value),"function"==typeof a&&("undefined"!=typeof o?a(!0,p):a(!0)),!1},c=function(b){return"undefined"!=typeof b.preventDefault&&b.preventDefault(),i(b),"function"==typeof a&&a(!1),!1},i=function(){q.hide(),q.unbind(d.body,"keyup",j),q.unbind(g,"focus",k),l&&q.unbind(f,"click",b),m&&q.unbind(e,"click",c)},j=function(a){var d=a.keyCode;(d===t.SPACE&&!n||n&&d===t.ENTER)&&b(a),d===t.ESC&&m&&c(a)},k=function(){n?o.focus():!m||q.buttonReverse?f.focus():e.focus()},this.bind(g,"focus",k),this.bind(h,"focus",k),l&&this.bind(f,"click",b),m&&this.bind(e,"click",c),this.bind(d.body,"keyup",j),this.transition.supported||this.setFocus()},bind:function(a,b,c){"function"==typeof a.addEventListener?a.addEventListener(b,c,!1):a.attachEvent&&a.attachEvent("on"+b,c)},handleErrors:function(){if("undefined"!=typeof a.onerror){var b=this;return a.onerror=function(a,c,d){b.error("["+a+" on line "+d+" of "+c+"]",0)},!0}return!1},appendButtons:function(a,b){return this.buttonReverse?b+a:a+b},build:function(a){var b="",c=a.type,d=a.message,e=a.cssClass||"";switch(b+='<div class="alertify-dialog">',b+='<a id="alertify-resetFocusBack" class="alertify-resetFocus" href="#">Reset Focus</a>',"none"===q.buttonFocus&&(b+='<a href="#" id="alertify-noneFocus" class="alertify-hidden"></a>'),"prompt"===c&&(b+='<div id="alertify-form">'),b+='<article class="alertify-inner">',b+=r.message.replace("{{message}}",d),"prompt"===c&&(b+=r.input),b+=r.buttons.holder,b+="</article>","prompt"===c&&(b+="</div>"),b+='<a id="alertify-resetFocus" class="alertify-resetFocus" href="#">Reset Focus</a>',b+="</div>",c){case"confirm":b=b.replace("{{buttons}}",this.appendButtons(r.buttons.cancel,r.buttons.ok)),b=b.replace("{{ok}}",this.labels.ok).replace("{{cancel}}",this.labels.cancel);break;case"prompt":b=b.replace("{{buttons}}",this.appendButtons(r.buttons.cancel,r.buttons.submit)),b=b.replace("{{ok}}",this.labels.ok).replace("{{cancel}}",this.labels.cancel);break;case"alert":b=b.replace("{{buttons}}",r.buttons.ok),b=b.replace("{{ok}}",this.labels.ok)}return l.className="alertify alertify-"+c+" "+e,k.className="alertify-cover",b},close:function(a,b){var c,d,e=b&&!isNaN(b)?+b:this.delay,f=this;this.bind(a,"click",function(){c(a)}),d=function(a){a.stopPropagation(),f.unbind(this,f.transition.type,d),m.removeChild(this),m.hasChildNodes()||(m.className+=" alertify-logs-hidden")},c=function(a){"undefined"!=typeof a&&a.parentNode===m&&(f.transition.supported?(f.bind(a,f.transition.type,d),a.className+=" alertify-log-hide"):(m.removeChild(a),m.hasChildNodes()||(m.className+=" alertify-logs-hidden")))},0!==b&&setTimeout(function(){c(a)},e)},dialog:function(a,b,c,e,f){j=d.activeElement;var g=function(){m&&null!==m.scrollTop&&k&&null!==k.scrollTop||g()};if("string"!=typeof a)throw new Error("message must be a string");if("string"!=typeof b)throw new Error("type must be a string");if("undefined"!=typeof c&&"function"!=typeof c)throw new Error("fn must be a function");return this.init(),g(),u.push({type:b,message:a,callback:c,placeholder:e,cssClass:f}),s||this.setup(),this},extend:function(a){if("string"!=typeof a)throw new Error("extend method must have exactly one paramter");return function(b,c){return this.log(b,a,c),this}},hide:function(){var a,b=this;u.splice(0,1),u.length>0?this.setup(!0):(s=!1,a=function(c){c.stopPropagation(),b.unbind(l,b.transition.type,a)},this.transition.supported?(this.bind(l,this.transition.type,a),l.className="alertify alertify-hide alertify-hidden"):l.className="alertify alertify-hide alertify-hidden alertify-isHidden",k.className="alertify-cover alertify-cover-hidden",j.focus())},init:function(){d.createElement("nav"),d.createElement("article"),d.createElement("section"),null==c("alertify-cover")&&(k=d.createElement("div"),k.setAttribute("id","alertify-cover"),k.className="alertify-cover alertify-cover-hidden",d.body.appendChild(k)),null==c("alertify")&&(s=!1,u=[],l=d.createElement("section"),l.setAttribute("id","alertify"),l.className="alertify alertify-hidden",d.body.appendChild(l)),null==c("alertify-logs")&&(m=d.createElement("section"),m.setAttribute("id","alertify-logs"),m.className="alertify-logs alertify-logs-hidden",d.body.appendChild(m)),d.body.setAttribute("tabindex","0"),this.transition=p()},log:function(a,b,c){var d=function(){m&&null!==m.scrollTop||d()};return this.init(),d(),m.className="alertify-logs",this.notify(a,b,c),this},notify:function(a,b,c){var e=d.createElement("article");e.className="alertify-log"+("string"==typeof b&&""!==b?" alertify-log-"+b:""),e.innerHTML=a,m.appendChild(e),setTimeout(function(){e.className=e.className+" alertify-log-show"},50),this.close(e,c)},set:function(a){var b;if("object"!=typeof a&&a instanceof Array)throw new Error("args must be an object");for(b in a)a.hasOwnProperty(b)&&(this[b]=a[b])},setFocus:function(){o?(o.focus(),o.select()):i.focus()},setup:function(a){var d,j=u[0],k=this;s=!0,d=function(a){a.stopPropagation(),k.setFocus(),k.unbind(l,k.transition.type,d)},this.transition.supported&&!a&&this.bind(l,this.transition.type,d),l.innerHTML=this.build(j),g=c("alertify-resetFocus"),h=c("alertify-resetFocusBack"),f=c("alertify-ok")||b,e=c("alertify-cancel")||b,i="cancel"===q.buttonFocus?e:"none"===q.buttonFocus?c("alertify-noneFocus"):f,o=c("alertify-text")||b,n=c("alertify-form")||b,"string"==typeof j.placeholder&&""!==j.placeholder&&(o.value=j.placeholder),a&&this.setFocus(),this.addListeners(j.callback)},unbind:function(a,b,c){"function"==typeof a.removeEventListener?a.removeEventListener(b,c,!1):a.detachEvent&&a.detachEvent("on"+b,c)}},{alert:function(a,b,c){return q.dialog(a,"alert",b,"",c),this},confirm:function(a,b,c){return q.dialog(a,"confirm",b,"",c),this},extend:q.extend,init:q.init,log:function(a,b,c){return q.log(a,b,c),this},prompt:function(a,b,c,d){return q.dialog(a,"prompt",b,c,d),this},success:function(a,b){return q.log(a,"success",b),this},error:function(a,b){return q.log(a,"error",b),this},set:function(a){q.set(a)},labels:q.labels,debug:q.handleErrors}},"function"==typeof define?define([],function(){return new c}):"undefined"==typeof a.alertify&&(a.alertify=new c)}(this);
308 </script>
309 </html>
复制代码
流年之外天空蓝的主页 流年之外天空蓝 | 初学一级 | 园豆:99
提问于:2017-04-20 23:16
< >
分享
最佳答案
0
<button type="button" onClick="test()">测试</button>

这是我写的测试代码,你试试

var test = function() {
  var a = confirm('请选择') ? true : false;
  alert(a);
}
收获园豆:20
好来污影后 | 菜鸟二级 |园豆:287 | 2017-04-21 09:12

谢谢啊;看了你的代码,突然灵机一动,问题解决了,谢谢

流年之外天空蓝 | 园豆:99 (初学一级) | 2017-04-21 10:27

@流年之外天空蓝: 哈哈 解决了要不要关注我一波~

好来污影后 | 园豆:287 (菜鸟二级) | 2017-04-21 10:28
其他回答(1)
0

把你的弹窗改为confirm看一下结果,是不是自己想要的,先确认一下逻辑是否正确再说

狼爷 | 园豆:1192 (小虾三级) | 2017-04-21 09:31
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册