JS单线程和异步总结

JS为单线程，先同步后异步，只有一个线程，只能做一件事，两段JS不能同时运行

// 循环运行期间，js执行和DOM渲染暂时卡顿
var i, sum = 0
for (i = 0; i < 100000; i++) {
  sum += i
}
console.log(sum)

// alert 不处理，js执行和DOM渲染暂时卡顿

console.log('1')
//alert('2')
console.log('3')

单线程的原因：避免 DOM 渲染的冲突

1、浏览器需要渲染DOM
2、JS 可以修改 DOM 结构
3、JS 执行的时候，浏览器 DOM 渲染会暂停
4、两段 JS 也不能同时执行 （都修改 DOM 就冲突了）

解决方案 - 异步

何时需要异步：
1、在可能发生等待的情况
2、等待过程中不能像 alert 一样阻塞程序运行
3、因此，所有的等待情况都需要异步

前端使用异步的场景

1、定时任务：setTimeout, setInverval

// setTimeout
console.log(100)
setTimeout(function () {
  console.log(200)    // 1000ms 后运行
}, 1000)              // 先不管他， 先让其他 js 代码运行
console.log(300)
console.log(400)

// 运行结果 100 300 400 200(1000ms后)

2、网络请求： ajax 请求， 动态 加载

// 网络请求

console.log(100)
$.ajax({
  url: 'xxxxxxxx',
  success: function (result) {  // ajax 加载完后运行
    console.log(result)         // 先不管他， 先让其他 js 代码运行
  }
})
console.log(300)
console.log(400)

// 运行结果 100 300 400 result

// img 动态加载

console.log('start')
var img = document.createElement('img')
img.onload = function () {
  console.log('load')
}
img.onerror = function () {
  console.log('error')
}
img.src = "xxxxxxx"
console.log('end')

// 运行结果 start end  load（成功） error（失败）

3、事件绑定