Javascript 如何使递归函数异步

在我的应用程序中，我需要计算绝对定位元素的offsetLeft，但问题是它嵌套得很深，所以当do element.current.offsetLeft我得到相对于第一个相对定位父元素的offsetLeft时，我通过创建递归函数解决了这一问题。问题是，它需要一段时间才能完成，因为它必须不断地回忆自己，直到到达body标签。所以我希望有人能帮我把递归函数修改成异步的。

这是我使用函数的组件

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

getOffsetLeft函数不需要异步，因为获取元素偏移矩形的属性访问都不需要异步

你可能在找类似的东西

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

它在内部执行递归向上树遍历。

getOffsetLeft函数不需要异步，因为获取元素偏移矩形的属性访问都不需要异步

你可能在找类似的东西

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

---

它在内部执行递归向上树遍历。

您可以使用递归进行此操作，但不需要异步-

const recursiveOffsetLeft=elem=> !elem | | elem.tagName==主体 ? 0 ：numberrelem.offsetLeft+recursiveoffsetleftem.parentElement 这是非常安全的，因为元素可以嵌套在数千层的深处，以免导致堆栈溢出

我在这里看到的一个改进是允许调用方指定停止点-

const recursiveOffsetLeft=elem，rel=document.body=> !元素| |元素===rel ? 0 ：numberrelem.offsetLeft+recursiveoffsetleftem.parentElement，rel 这允许调用方重用此函数来计算不同深度的偏移量-

recursiveOffsetLeftsomeElem//默认为document.body

---

recursiveOffsetLeftsomeElem，someParent/您可以为此使用递归，但不需要异步-

const recursiveOffsetLeft=elem=> !elem | | elem.tagName==主体 ? 0 ：numberrelem.offsetLeft+recursiveoffsetleftem.parentElement 这是非常安全的，因为元素可以嵌套在数千层的深处，以免导致堆栈溢出

我在这里看到的一个改进是允许调用方指定停止点-

const recursiveOffsetLeft=elem，rel=document.body=> !元素| |元素===rel ? 0 ：numberrelem.offsetLeft+recursiveoffsetleftem.parentElement，rel 这允许调用方重用此函数来计算不同深度的偏移量-

recursiveOffsetLeftsomeElem//默认为document.body

---

递归OffsetLeftSomeElem，someParent//getOffsetLeft函数不需要是异步的，因为获取元素偏移矩形的属性访问都不需要是异步的。问题是它需要一段时间才能完成，因为它必须不断地调用它自己，直到它到达body标记-即使有数百个父级，这也不需要更多我知道这不会花费太多时间，但是当我记录结果时，我得到了未定义的结果，这很奇怪，你看过代码了吗？你得到了未定义的结果，因为你在递归时不返回。@سعيد-未定义的原因是你没有返回递归调用之前缺少返回的结果。但是，将不使用wait的函数标记为async没有任何用处。getOffsetLeft函数不需要异步，因为获取元素偏移矩形的属性访问都不需要异步。问题是，它需要一段时间才能完成，因为它必须不断调用它自己，直到到达body标记-即使有成百上千的家长，这也不会超过几毫秒。我知道这不会花费太多时间，但当我记录结果时，我仍然会得到未定义的结果，这很奇怪，你看过代码了吗？没有定义是因为递归时没有返回。@سعيد-没有定义是因为没有返回递归调用之前缺少返回的结果。但是，将一个不使用wait的函数标记为async没有任何用处。哇，我真不敢相信我没有想过使用while循环，而旁观者眼中的直观方法更直观、更简洁。A在我看来非常直观。同意@3limin4t0r。更多信息，请参见本帖中的答案：我不敢相信我没有想到使用while循环，因为旁观者的眼睛里有更直观的方法，非常干净和简单的@سعيد直觉。A在我看来非常直观。同意@3limin4t0r。更多信息请参见本帖中的我的答案：D