Javascript/Jquery 加载回调和编写基本函数

Posted 2023-05-08

【中文标题】Javascript/Jquery 加载回调和编写基本函数

【英文标题】：Javascript/Jquery Load Callback and Writing a Base Function

【发布时间】：2017-05-06 23:11:06

【问题描述】：

这可能是一个重复的问题，但我不知道如何用短语搜索它。我对 JS 属性不是很熟悉。

案例：

假设我创建了一些元素类型，例如文本、图像、音频、视频等，并假设我赋予它们相同的能力，例如拖动、旋转、调整大小等。为简单起见，让我们考虑这两个元素：文本和图像.

问题：

假设我需要获取这两个元素的大小并将它们设置为它们的包装 div。

文本元素很简单，我可以立即获取大小并设置包装div的大小。

图像元素等待图像的加载，它的大小只能在加载发生后设置，即在其加载回调中。

简单示例

function createText()
    var aDiv = createWrapperDiv(); // <div class="element"></div>
    var anElem = $('<textarea></textarea>')
    aDiv.append(anElem)

    // can set immediately
    aDiv.attr('width', anElem.width());
    aDiv.attr('height', anElem.height());

    // Some other size-DEPENDENT and size-INDEPENDENT stuff can both be done here.
    sizeDependentStuff();
    sizeIndependentStuff();



function createImage()
    var aDiv = createWrapperDiv(); // <div class="element"></div>
    var anElem = $('<img>')
    aDiv.append(anElem)

    // need to wait for element to load.
    anElem.attr('src',imageUrl)
    anElem.load(function(e) 
        aDiv.attr('width', e.currentTarget.width());
        aDiv.attr('height', e.currentTarget.height());

        // Some other size-DEPENDENT stuff.
        sizeDependentStuff();
    );

    // Some other size-INDEPENDENT stuff.
    sizeIndependentStuff();

我想要什么：

我想定义一个 createSimpleElement 函数（类似于工厂的东西），它接受类型并同时执行 sizeDependentStuff 和 sizeIndependentStuff，以便我可以重用相同的代码。请注意，我有 2 种以上的类型，并且数量可以增加。我找不到合适的方法来处理加载过程。

我希望它很清楚，请考虑我仍在学习过程中。

谢谢。

【问题讨论】：

您将使用 Stack Overflow 右上角的搜索功能。或者您也可以使用 google 和参数“site:***.com”来搜索它

感谢您的回答，但我不知道如何“表达”有关此问题的搜索。抱歉，不清楚。

哦，我明白了。那么您解释它的方式我可以总结一下您正在寻找动态创建元素而不必一遍又一遍地使用代码？使用通用代码创建一个函数并让它输出一个对象，然后将名称作为参数传递以使其唯一，然后在创建动态元素的循环中调用该函数...

您的问题是什么？我迷失在解释中。您在说有关图像的内容，并等待它们加载，但是在您的总结和我想要的部分中，您完全忽略了这一点。

我想清楚但我猜是搞砸了。我简化了一些事情，希望对您有所帮助。

【参考方案1】：

这样的事情呢？

function base(parentElement, element)
    parentElement.append(element);
    parentElement.attr('width', element.width());
    parentElement.attr('width', element.width());
    /*other common properties...*/


function createText()
    var aDiv = createWrapperDiv();
    var anElem = $('<textarea></textarea>')
    base(aDiv, anElem);    


function createImage()
    var aDiv = createWrapperDiv();
    var anElem = $('<img>')
    anElem.attr('src',imageUrl)
    anElem.load(function(e) 
        base(aDiv, anElem);   
    );

    // Some other size-INDEPENDENT stuff.

  

【讨论】：

总是在绑定加载事件后设置src。始终在答案中说明更改的内容和原因。