一个关于函数执行顺序(暂停,等待)问题?还请各位大神指教..
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>
最佳答案
0
<button type="button" onClick="test()">测试</button>
这是我写的测试代码，你试试
var test = function() { var a = confirm('请选择') ? true : false; alert(a); }
收获园豆：20
谢谢啊;看了你的代码,突然灵机一动,问题解决了,谢谢
@流年之外天空蓝: 哈哈 解决了要不要关注我一波~
其他回答(1)
0
把你的弹窗改为confirm看一下结果，是不是自己想要的，先确认一下逻辑是否正确再说
