As shown in the figure, click a button to trigger the current popup. It is necessary to judge the existing configuration data to choose whether to disable the drop-down selection box in the figure.

Interfaces need to adjust the picture to get the configuration data, it needs two parameters, systemType English name is one of the parameters, and the need from the current pop-up box line corresponding to the data obtained in a row, and can only access to the Chinese name, then you must get good English and Chinese background management configuration type configuration data to match the corresponding system. As shown in figure:

The dictionaryType: systemType parameter is mandatory. So my initial code looks like this:

First call getData() to get the system type configuration data, then iterate over the system type data, and then call getReserveParamList() to get the configuration data to disable the dropdown

The pit is a getData () this way. Then it is a micro task follow-up, won’t he performed, such as to perform this. DictSystemTypeData. The forEach () this approach, Directly execute this. DictSystemTypeData. ForEach (), but at the moment this. DictSystemTypeData this array is enclosing the getData (), which is the traversal methods at this time also can’t perform, but the following code

Popup window has been opened during this time, because there is no execution enclosing dictSystemTypeData. The forEach (), so I can’t get this method for this. IsOpenDivice data, also cannot make the disabled to take effect

Conclusion: js execution mechanism: js for single threads (the main thread) macro task: js rendering UI rendering timer (setTimeout/setInterval/setImmdiate) I/o micro tasks: Promise process.nexttick object.observe MutationObserver vue.nexttick (function() {}) uses both macro and micro tasks. Use Promise first, H5api (MutationObserver), The setTimeout and setImmdiate script macro tasks are executed first, and the subsequent execution process is to clear the microtask first and then execute the macro task. If a macro task depends on the data provided by the microtask in another macro task, the code of the macro task will be unable to run. You can’t put them in one method and execute them as macro tasks at the same time. You must run another macro task somewhere else and get the data before executing that macro task. Here’s an example:

SetTimeout (() => {// macro task console.log('timeout1'); Resolve (). Then () => {// macro task console.log('success'); }); }, 0); Resolve ().then() => {// macro task console.log('success2'); // macro task setTimeout(() => {// macro task console.log('timeout2'); })}); Resolve ().then() => {// macro task console.log('success3'); }); // Success2 Success3 timeOut1 Success timeout2Copy the code