如何使遞歸 function 異步

Question

在我的應用程序中，我需要計算絕對定位元素的 offsetLeft，但問題是它嵌套很深，所以當element.current.offsetLeft我得到相對於第一個相對定位的父元素的 offsetLeft 時，我通過創建一個遞歸 function。 問題是它需要一些時間才能完成，因為它必須不斷地自我回憶，直到它到達身體標簽。 所以我希望有人可以幫助我將遞歸 function 修改為異步的。

這是我在其中使用函數的組件

import React,{useRef}  from 'react'
import {getOffsetLeftRecursive} from '../../../utils/getOffsetLeftRecursive'

const ComponentA= ({todoList,index}) => {
    const elementRef= useRef()

    const clickStart=e=>{
        try {
            const res = await getOffsetLeftRecursive(elementRef.current,0)
            console.log(res)// this return undifned 
        } catch (error) {
            console.log(error)
        }
    }
   
    return (
        <div 
        ref={elementRef}
        onMouseDown={clickStart} 
        className="shadow-xl"
        style={{
             left:(LIST_WIDTH +SPACING)*index
        }}
        className="absolute top-0 " > 
  
        </div>
    )
}

export default TodosList

這是遞歸的 function

export const  getOffsetLeftRecursive= (element,accumulated)=>{
    try {
        if(element.tagName =="BODY"){
          console.log(accumulatedOffsetLeft) // this returns the correct value 
          return accumulatedWidth  
        }
        const offsetLeft =accumulatedWidth+ element.offsetLeft
        getOffsetLeftRecursive(element.parentElement,offsetLeft)
        
    } catch (error) {
        console.log(error)
    }
}

Answer 1

getOffsetLeft function 不需要是異步的，因為獲取元素的偏移矩形的任何屬性訪問都不需要異步。

您可能正在尋找類似的東西

function getCumulativeOffsetLeft(element) {
  let offsetLeft = 0;
  while (element && element.tagName !== "BODY") {
    offsetLeft += element.offsetLeft;
    element = element.parentElement;
  }
  return offsetLeft;
}

它在內部進行“遞歸”（向上樹遍歷）。

Answer 2

您可以為此使用遞歸，但不需要它是異步的 -

const recursiveOffsetLeft = elem =>
  !elem || elem.tagName == "BODY"
    ? 0
    : Number(elem.offsetLeft) + recursiveOffsetLeft(elem.parentElement)

這是非常安全的，因為元素可以嵌套數千層，然后才會導致堆棧溢出。

我可以在這里看到的一項改進是允許調用者指定停止點 -

const recursiveOffsetLeft = (elem, rel = document.body) =>
  !elem || elem === rel
    ? 0
    : Number(elem.offsetLeft) + recursiveOffsetLeft(elem.parentElement, rel)

這允許調用者重用這個 function 來計算各種深度的偏移量 -

recursiveOffsetLeft(someElem) // defaults to document.body
recursiveOffsetLeft(someElem, someParent) // <-