AJAX请求成功后刷新页面如何避免出现页面闪烁问题？

• 核心诱因是你在AJAX请求成功后调用了window.location.reload(true)强制刷新整个页面，页面重新加载、渲染资源的过程自然会产生视觉闪烁
• 额外加重卡顿/闪烁的问题点：你设置了async: false启用同步AJAX，会直接阻塞浏览器主线程，导致请求过程中页面完全无响应，进一步拉低体验
• 隐藏bug：定时器回调里的this指向错误，你原有代码里$(this).val("1")无法正确获取输入框元素，因为setTimeout回调的this指向window，异常的数值渲染也会导致视觉跳变

1. 取消全局页面刷新，改为局部更新DOM #

请求成功后不要刷新整页，直接用后端返回的最新购物车数据（比如当前商品数量、商品小计、购物车总价等）修改对应DOM节点的内容，完全避免页面重载。如果后端返回的是完整的购物车HTML片段，也可以直接替换购物车容器的innerHTML，闪烁程度也远低于整页刷新。

2. 移除同步AJAX配置 #

删掉async: false配置，用默认的异步请求，不会阻塞页面交互。

3. 新增loading状态优化体验 #

完全可以用loading动图优化体验，请求发起时将loading展示在操作区域/购物车容器上，可搭配半透明蒙层禁止用户请求过程中重复操作，既可以遮挡请求过程中可能的数值跳变，也能给用户明确的操作反馈，请求结束后隐藏loading即可。

var timeout = null;
// 提前初始化loading元素，也可以直接写在HTML中默认隐藏
var $loading = $('<div class="cart-loading" style="position:fixed;inset:0;background:rgba(255,255,255,0.7);display:none;align-items:center;justify-content:center;z-index:999;"><img src="你的loading动图本地路径" alt="加载中"></div>').appendTo('body');

$('.num').on('keyup', function() {
    // 提前缓存当前输入框元素，解决定时器回调this指向问题
    var $this = $(this);
    var newNum = $this.val();
    var pid = $this.attr("name");

    clearTimeout(timeout);
    timeout = setTimeout(function() {
        // 数值合法性校验
        if(newNum <= 0){
            alert("At least 1 product!");
            newNum = 1;
            $this.val("1");
        }
        // 展示loading
        $loading.css('display','flex');
        $.ajax({
            type: "post",
            url: myAPI,
            data: {
                pid: pid,
                newNum: newNum
            },
            dataType: "json",
            success:function(data){
                // 替换为你自己的局部更新逻辑，示例：
                // 更新当前商品小计：$this.parents('.goods-item').find('.subtotal').text(data.itemSubtotal);
                // 更新购物车总价：$('.cart-total-price').text(data.cartTotal);
            },
            complete: function() {
                // 请求完成不管成功失败都隐藏loading
                $loading.hide();
            }
        });
    }, 1000)
});

内容的提问来源于stack exchange，提问作者ChaCha