Это очень распространенная проблема, с которой мы сталкиваемся, борясь с «таинствами» JavaScript.
Давайте начнем с простой функции JavaScript:
function foo(){
// do something
return 'wohoo';
}
let bar = foo(); // bar is 'wohoo' here
Это простой синхронный вызов функции (где каждая строка кода выполняется одна за другой в последовательность), и результат будет таким же, как ожидалось.
Теперь добавим немного завихрения, введя небольшую задержку в нашей функции, чтобы все строки кода не выполнялись последовательно. Таким образом, он будет эмулировать асинхронное поведение функции:
function foo(){
setTimeout( ()=>{
return 'wohoo';
}, 1000 )
}
let bar = foo() // bar is undefined here
Итак, вы идете, эта задержка просто сломала функциональность, которую мы ожидали! Но что именно произошло? Ну, на самом деле это довольно логично, если вы посмотрите на код. функция foo()
после выполнения ничего не возвращает (таким образом, возвращаемое значение равно undefined
), но оно запускает таймер, который выполняет функцию после 1s, чтобы вернуть «wohoo». Но, как вы можете видеть, значение, присвоенное бару, является немедленно возвращенным материалом из foo (), а не что-либо еще, что приходит позже.
Итак, как мы решаем эту проблему?
Давайте попросим нашу функцию для ОБЕЩАНИЯ. Обещание действительно о том, что это означает: это означает, что функция гарантирует, что вы предоставите любой результат, который он получит в будущем. поэтому давайте посмотрим на это в нашей маленькой проблеме выше:
function foo(){
return new Promise( (resolve, reject) => { // I want foo() to PROMISE me something
setTimeout ( function(){
// promise is RESOLVED , when exececution reaches this line of code
resolve('wohoo')// After 1 second, RESOLVE the promise with value 'wohoo'
}, 1000 )
})
}
let bar ;
foo().then( res => {
bar = res;
console.log(bar) // will print 'wohoo'
});
Таким образом, резюме - для решения асинхронных функций, таких как вызовы на основе ajax и т. д., вы можете использовать обещание resolve
значение (которое вы намерены вернуть). Таким образом, короче говоря, вы разрешаете значение вместо возврата в асинхронных функциях.
В соответствии с Ошибка 984869 - display: flex
не работает для элементов кнопки ,
<button>
не реализуется (браузерами) в чистом CSS, поэтому они немного черного ящика, с точки зрения CSS. Это означает, что они не обязательно реагируют так же, как, например, a<div>
будет.Это не относится к flexbox - например, мы не создаем полосы прокрутки, если вы поместите
overflow:scroll
на кнопку, и мы не будем отображать ее в виде таблицы, если вы поместитеdisplay:table
на нее.Отступив еще дальше, t, характерный для
<button>
. Рассмотрим<fieldset>
и<table>
, которые также имеют особое поведение для рендеринга:data:text/html,<fieldset style="display:flex"><div>abc</div><div>def</div>
В этих случаях Chrome соглашается с нами и игнорирует режим отображения
flex
. (как видно из того факта, что «abc» и «def» в итоге складываются вертикально). Тот факт, что они выполняют то, что вы ожидаете на<button style="display:flex">
, скорее всего, просто из-за детализации реализации.В реализации кнопки Gecko мы делаем hardcode
<button>
(и<fieldset>
и<table>
) как имеющие определенный класс кадров (и, следовательно, определенный способ выкладки дочерних элементов), независимо от свойстваdisplay
.Если вы хотите надежно надежно установить детей в конкретный режим компоновки в кросс-браузере, лучше всего использовать обертку-div внутри кнопки, как вам нужно, чтобы внутри
blockquote ><table>
или<fieldset>
.Поэтому эта ошибка была отмечена как «разрешенная недействительная».
Существует также Ошибка 1047590 -
display: flex;
не работает в<fieldset>
, в настоящее время " unconfirmed ".
Хорошие новости: Firefox 46+ реализует Flexbox для
<fieldset>
. См. bug 1230207 .
вы можете поместить дополнительный div в <fieldset>
со следующими реквизитами:
flex-inner-wrapper {
display: inherit;
flex-flow: inherit;
justify-content: inherit;
align-items: inherit;
}
По моему опыту, я обнаружил, что ни <fieldset>
, ни <button>
, ни <textarea>
не могут правильно использовать display:flex
или унаследованные свойства.
Как уже упоминалось, ошибки были зарегистрированы. Если вы хотите использовать flexbox для управления заказами (например, order:2
), вам нужно будет обернуть элемент в div. Если вы хотите, чтобы flexbox контролировал фактический макет и размеры, вы можете захотеть использовать div, а не элемент управления ввода (который воняет, я знаю).
<div role="group">
<p>foo</p>
<p>bar</p>
</div>
<div>
<p>foo</p>
<p>bar</p>
</div>
Возможно, нужно использовать группу ролей, потому что firefox, chrome и я думаю, что у сафари есть ошибка с полями, видимо. Тогда селектор в CSS будет просто
div[role='group'], div {
display: flex;
border: 1px solid;
}
. Редактирование: Вот некоторые проблемы, которые испытывают и другие люди.