美文网首页大前端刷级之路
$.ajax同步请求会阻塞js进程

$.ajax同步请求会阻塞js进程

作者: 天驱丶 | 来源:发表于2019-04-15 14:36 被阅读0次

背景

上周有同事问我关于ajax的问题(同事是测试,他自己写的js脚本),在一个循环中使用 jquery 的 $.ajax 方法获取数据后更新 dom,但出现的问题是更新 dom 会在循环请求完成后再渲染。

分析问题

这是同事发给我的代码(省略了部分数据)

document.getElementById('send').onclick = function() {
  // ...
  for (var group = 1; group <= groupsNums + 1; group++) {
    // ...
    $.ajax({
      async: false,
      url: '/invest',
      type: 'POST',
      // timeout: 6000,
      contentType: 'application/x-www-form-urlencoded',
      data: {
        csrfmiddlewaretoken: token,
        definedEnv: definedEnv,
        env: env,
        nums: nums,
        phone: phone,
        passwd: passwd,
        prodcutList: prodcutList,
        minAmount: minAmount,
        maxAmount: maxAmount,
        multiple: multiple,
        group: group,
      },
      dataType: 'json',
      success: function(result) {
        // var data=JSON.parse(result);
        console.log(result, '>>>', typeof result);
        // console.log($('#results').html)
        console.log('bbb:', result.code);
        // $('#results').innerHTML = JSON.stringify(result)
        let success_result_msg = result.succss_data.map(item => item.msg).join('<br>');
        let fail_result_msg = result.fail_data.map(item => item.msg).join('<br>');
        console.log(success_result_msg, '>>>', fail_result_msg);
        document.getElementById('success_results').innerHTML += success_result_msg + '<br>';
        document.getElementById('fail_results').innerHTML += fail_result_msg + '<br>';
      },
    });
  }
};

我的第一感觉,是不是浏览器将两次 dom 操作合并渲染了,所以让他在 success 最后加上

const clientWidth = document.body.clientWidth

这样能够让浏览器及时渲染一次以获得正确的 clientWidth 属性,但还是不能解决问题

后来同事给我找到一个链接 有ajax同步的方法里对页面的渲染能否起效?

image

解决问题

那应该就是 async: false 导致的问题了,为了保证渲染顺序不出错,我们可以改写成 async await 的方式,在保证异步加载同步控制的同时不会阻塞主进程

document.getElementById('send').onclick = async function() {
  // ...
  for (var group = 1; group <= groupsNums + 1; group++) {
    // ...
    const result = await $.ajax({
      url: '/invest',
      type: 'POST',
      // timeout: 6000,
      contentType: 'application/x-www-form-urlencoded',
      data: {
        csrfmiddlewaretoken: token,
        definedEnv: definedEnv,
        env: env,
        nums: nums,
        phone: phone,
        passwd: passwd,
        prodcutList: prodcutList,
        minAmount: minAmount,
        maxAmount: maxAmount,
        multiple: multiple,
        group: group,
      },
      dataType: 'json',
    });
    // var data=JSON.parse(result);
    console.log(result, '>>>', typeof result);
    // console.log($('#results').html)
    console.log('bbb:', result.code);
    // $('#results').innerHTML = JSON.stringify(result)
    let success_result_msg = result.succss_data.map(item => item.msg).join('<br>');
    let fail_result_msg = result.fail_data.map(item => item.msg).join('<br>');
    console.log(success_result_msg, '>>>', fail_result_msg);
    document.getElementById('success_results').innerHTML += success_result_msg + '<br>';
    document.getElementById('fail_results').innerHTML += fail_result_msg + '<br>';
  }
};

相关文章

  • $.ajax同步请求会阻塞js进程

    背景 上周有同事问我关于ajax的问题(同事是测试,他自己写的js脚本),在一个循环中使用 jquery 的 $....

  • day11(2017 11 4)

    Ajax Ajax的核心就是异步请求,异步的区别就是阻塞和非阻塞,ajax不是一门语言,只是一个技术 原生JS的A...

  • 前端面试题九

    1.简述同步和异步的区别 答:同步是阻塞模式,异步是非阻塞模式。 同步就是指一个进程在执行某个请求的时候,若该请求...

  • 同步和异步的区别

    同步和异步的区别 同步是阻塞模式,异步是非阻塞模式。 同步就是指一个进程在执行某个请求的时候,若该请求需要一段时间...

  • 网络知识点回顾一

    同步请求和异步请求- 同步请求:阻塞式请求,会导致用户体验的中断- 异步请求:非阻塞式请求,不中断用户体验,百度地...

  • 同步和异步的区别

    同步就是阻塞模式,异步是非阻塞模式。 同步就是指一个进程在执行某个请求的时候,若该请求需要一段时间才能返回信息,那...

  • 简述同步和异步的区别

    同步是阻塞模式,异步是非阻塞模式。 同步就是指一个进程在执行某个请求的时候,若该请求需要一段时间才能返回信息,那么...

  • 关于ajax同步和异步的区别

    1.同步 当客户端发送ajax同步请求时,当js代码运行到该请求时将会一直等待该请求返回的结果,js将不会执行后续...

  • 同步和异部的区别:

    同步是阻塞式,异步是非阻塞模式; 同步就是指一个进程在执行某个请求的时候,若该请求需要一段时间才能返回信息,那么这...

  • I/O模型

    一般来说I/O模型可以分为:同步阻塞,同步非阻塞,异步阻塞,异步非阻塞IO 同步阻塞IO:在此种方式下,用户进程在...

网友评论

    本文标题:$.ajax同步请求会阻塞js进程

    本文链接:https://www.haomeiwen.com/subject/gzuuwqtx.html