fabric.js The layer is not updated immediately

I encountered that the fabric update level is not timely, what I want is that when I drag up, the corresponding text or image will also go up a level, and when I drag down, the corresponding text or layer will also go down to the next level, but in fact, I didn’t change the level when I dragged up the first time, but I changed the level when I dragged it on the second time, and the console didn’t report an error. Using fabric.js, I printed data, newIndex, and hcnumber, but the results were all correct, but they didn’t update the level for the first time
Depending on how many positions you have dragged, you can change the level, and the parameters that svg_font_hierarchy pass are hcnumber to pass in a few levels up or down a few levels, font to descend the element, and Type ‘increase’ | ‘decrease’ is up or down, and kind is dragging image or text

where data is the fabric instance that is searched according to text or typepath, this.canvas.moveTo(); Accept two arguments, the first is a fabric instance, the second is a hierarchy, this.canvas.renderAll(); is to refresh the canvas

lang-jssvg_font_hierarchy(hcnumber,font,type,kind){
  let data
  switch(kind){
    case "Image":
    data = this.fabricImg.find(Image => Image.typepath === font);
    break;
    case "text":
    console.log("Text")
    data = this.textvalue.find(text => text.text === font);
    break;
  }
    if (!data) {
        console.log('未找到对应的文本');
        return;
    }

    let newIndex;
    switch (type) {
        case "increase":
            newIndex = data.moveTo + hcnumber;
            console.log(newIndex)
            this.canvas.moveTo(data, newIndex);      
            this.canvas.renderAll();
            break;
        case "decrease":
            newIndex = data.moveTo - (hcnumber +1);
            this.canvas.moveTo(data, newIndex);
            this.canvas.renderAll(() => {
                console.log('渲染完成');
            });
            break;
        default:
            console.log('无效的类型');
            return;
    }
}

Drag method

$(function() {
    $("#sortableList").sortable({
       start: function(event, ui) {
            // 在拖动开始时，记录拖动元素的初始索引
            ui.item.data('startIndex', ui.item.index());
        },
      stop: function(event, ui) {
            const draggedElement = ui.item;
            const startIndex = draggedElement.data('startIndex');
            const endIndex = draggedElement.index(); 
            const change = endIndex - startIndex;
            draggedElement.data('value', endIndex + 1);
            const textValue = draggedElement.find('.textvalue').text();
            console.log(textValue);

            // 判断拖动的内容是文字还是图片
            const isImage = textValue.startsWith('Image'); // 根据文本判断
            if (isImage) {
                console.log("拖动的是图片");
                if (change > 0) {
                svg_colors.svg_font_hierarchy(change, textValue, "decrease",'Image');
                } else if (change < 0) {
                    svg_colors.svg_font_hierarchy(change + 1, textValue, "increase",'Image');
                } else {
                    console.log("位置没有变化");
                }
            } else {
                console.log("拖动的是文字");
                if (change > 0) {
                svg_colors.svg_font_hierarchy(change, textValue, "decrease",'text');
                } else if (change < 0) {
                    svg_colors.svg_font_hierarchy(change + 1, textValue, "increase",'text');
                } else {
                    console.log("位置没有变化");
                }
            }

            
        }
    });
});