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

Question

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

最初我使用了许多函数 - 请参阅下面的版本 1 - 这些函数有效(这些函数中的代码在版本 2 中有效)。这有效。

我后来才意识到这些函数中的代码是多么相似。版本 2 显示了没有函数的代码，说明了相似性。这也有效。 (valTable 已在前面定义 - 下面未显示定义)。

然后，“显然”我应该编写一个只接受两个参数的通用函数。使用不同的参数对该函数进行三次调用肯定会起作用(!)事实上，似乎只调用了第三个函数；前两个甚至没有成功生成控制台消息。

我想知道我是否在回调中遗漏了一些东西 - 我读了 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

反跳恰恰意味着您的函数将不会被调用，直到经过一定时间没有进行新的调用。

这是预期的行为，例如自动完成小部件的行为。您不希望立即处理用户执行的每个击键操作。相反，您等待用户停止输入(例如 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);