在连续函数中使用 jQuery 的加载

Question

我正在尝试填充表格中的不同单元格，命名为#RECALRow1、#RECALCol1、#RECALBodySum。每个都是从数据库中填充的。我正在使用 AJAX，特别是 jQuery 的负载。

最初我使用了一些函数 - 请参阅下面的版本 1 - 它们有效（这些函数中的代码在版本 2 中有效）。这有效。

我后来才意识到这些函数中的代码有多么相似。版本 2 显示了没有函数的代码，说明了相似性。这也奏效了。（valTable 定义较早 - 下面未显示定义）。

然后 "obvious" 我似乎应该编写一个只接受两个参数的通用函数。使用不同的参数对该函数进行三次调用，应该肯定有效（！）事实上，似乎只调用了第三个函数；前两个甚至没有成功生成控制台消息。

我想知道我是否遗漏了回调的某些内容 - 我阅读了 How do I return the response from an asynchronous call? - 但我看不出我需要它们。也许我即将学习一些非常基础的实用知识 AJAX。

版本 1

单独的函数，每个函数都使用jQuery负载。 这行得通。 [旁白 - ASP 设置默认选择值]

UpdateCol1Possibilities(); // sets content for #RECALCol1
UpdateRow1Possibilities();
UpdateBodySumPossibilities();

版本 2

直接调用jQuery加载，不封装。 这行得通。 [另外 - 我们需要调整默认选择值]

$('#RECALRow1').load(
    "/_RECAL/AJAX/AJAXSetGroupbyList.asp", // URL
    { // data - no need for callback
    "RECALtable":valTable,
    "RECALCol1Row1Id":'RECALRow1'
}); // close load

$('#RECALCol1').load(
    "/_RECAL/AJAX/AJAXSetGroupbyList.asp", // URL
    { // data - no need for callback
    "RECALtable":valTable,
    "RECALCol1Row1Id":'RECALCol1'
}); // close load                   

$('#RECALBodySum').load(
    "/_RECAL/AJAX/AJAXSetGroupbyList.asp", // URL
    { // data - no need for callback
    "RECALtable":valTable,
    "RECALCol1Row1Id":'RECALBodySum'
}); // close load

版本 3

通用函数，它使用 jQuery 负载。 这行不通。

var RealSelect = _.debounce(function(IdToChange) { 
console.log('Calling RealSelect changing Id: ' + IdToChange);
$('#' + IdToChange).load(
    "/_RECAL/AJAX/AJAXSetGroupbyList.asp", // URL
    { // data
        "RECALtable":$('#RECALtable').children().val(),
        "RECALCol1Row1Id":IdToChange
    }
    , // callback
    function() { // callback function - success
        //  alert('successful callback!');
    } // close callback function, close load
    ) // close load
}
,50); // end RealSelect function

RealSelect('RECALCol1'); // sets content for #RECALCol1
RealSelect('RECALRow1');                
RealSelect('RECALBodySum');
//  Only #RECALBodySum is populated
}

Answer 1

我不确定您为什么觉得应该使用 _.debounce，但这正是您的问题，据我所知。

删除函数声明中的去抖动包装器，一切都应该有效：

var RealSelect = function(IdToChange) { 
console.log('Calling RealSelect changing Id: ' + IdToChange);
$('#' + IdToChange).load(
    "/_RECAL/AJAX/AJAXSetGroupbyList.asp", // URL
    { // data
        "RECALtable":$('#RECALtable').children().val(),
        "RECALCol1Row1Id":IdToChange
    }
    , // callback
    function() { // callback function - success
        //  alert('successful callback!');
    } // close callback function, close load
    ) // close load
}; // end RealSelect function

Debounce 恰恰意味着你的函数将 NOT 被调用，直到经过一定的时间 no拨打了新电话。

例如，这是自动完成小部件的预期行为。您不想立即处理用户执行的每个键击。相反，您等待用户停止输入，比如 500 毫秒，然后开始从服务器获取数据。

在您的例子中，您正在创建一个去抖函数，然后连续调用它三次。 Debounce 按预期工作 - 仅最后一次调用运行，并且仅在 50 毫秒后运行。

来自underscorejs docs：

debounce_.debounce(function, wait, [immediate])

Creates and returns a new debounced version of the passed function which will postpone its execution until after wait milliseconds have elapsed since the last time it was invoked. Useful for implementing behavior that should only happen after the input has stopped arriving. For example: rendering a preview of a Markdown comment, recalculating a layout after the window has stopped being resized, and so on.

Pass true for the immediate parameter to cause debounce to trigger the function on the leading instead of the trailing edge of the wait interval. Useful in circumstances like preventing accidental double-clicks on a "submit" button from firing a second time.

var lazyLayout = _.debounce(calculateLayout, 300); $(window).resize(lazyLayout);

在连续函数中使用 jQuery 的加载

Using jQuery's load in successive functions

javascript

ajax

jquery

underscore.js

debouncing

版本 1

版本 2

版本 3