如何控制JS代码中的执行顺序

代码如下：

<html>
<head>
<title>shuju</title>
<script>
function fn1(){
var ajax = new XMLHttpRequest()
ajax.open('GET','http://127.0.0.1:5000',true) 
ajax.send()
ajax.onreadystatechange=()=>{
        if(ajax.readyState === 4 && ajax.status === 200){
                datalists=ajax.response
                console.log('你好')
                return datalists
               DataList=JSON.parse(ajax.response)
               
                
        }  
}
}
</script>
</head>
<body>
<script type="text/javascript"> 
var shujuju=fn1()
console.log(shujuju)
</script>
</body>
</html>

img


我想等datalists的值出来之后再执行第二段JS函数。请问有什么办法么？

可以参考下，没有验证浏览器的适用性。


<html>

<head>
  <title>shuju</title>
  <script>
    // function fn1() {
    //   var ajax = new XMLHttpRequest()
    //   ajax.open('GET', 'http://127.0.0.1:5000', true)
    //   ajax.send()
    //   ajax.onreadystatechange = () => {
    //     if (ajax.readyState === 4 && ajax.status === 200) {
    //       datalists = ajax.response
    //       console.log('你好')
    //       return datalists
    //       DataList = JSON.parse(ajax.response)
    //     }
    //   }
    // }

    // 例一 callback 形式
    // function fn1(callback) {
    //   var ajax = new XMLHttpRequest()
    //   ajax.open('GET', 'http://127.0.0.1:5000', true)
    //   ajax.send()
    //   ajax.onreadystatechange = () => {
    //     if (ajax.readyState === 4 && ajax.status === 200) {
    //       datalists = ajax.response
    //       console.log('你好')
    //       // return datalists
    //       callback(datalists);
    //       DataList = JSON.parse(ajax.response)
    //     }
    //   }
    // }

    // 例二 Promise 的形式
    function fn1() {
      return new Promise((resolve) => {
        var ajax = new XMLHttpRequest()
        ajax.open('GET', 'http://127.0.0.1:5000', true)
        ajax.send()
        ajax.onreadystatechange = () => {
          if (ajax.readyState === 4 && ajax.status === 200) {
            datalists = ajax.response
            console.log('你好')
            // return datalists
            resolve(datalists);
            DataList = JSON.parse(ajax.response)
          }
        }
      })
    }
  </script>
</head>

<body>
  <script type="text/javascript">
    // var shujuju = fn1()
    // console.log(shujuju)

    // 例一
    // fn1((r) => {
    //   console.log(r);
    // })


    // 例二
    fn1().then(r => {
      console.log(r);
    })
  </script>
</body>

</html>

function fn1(){
    return new Promise(resolve => {
        var ajax = new XMLHttpRequest()
        ajax.open('GET','http://127.0.0.1:5000',true) 
        ajax.send()
        ajax.onreadystatechange = ()=> {
            if(ajax.readyState === 4 && ajax.status === 200) {
            datalists=ajax.response
            console.log('你好')
            resolve(datalists)
               DataList = JSON.parse(ajax.response)
          }
        }
    })
}

async function sync() {
    const mData = await fn1()
    console.log(mData)
}

sync()