1

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

最初我使用了一些函数——见下面的版本 1——它们有效（这些函数中的代码在版本 2 中有效）。这行得通。

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

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

我想知道我是否在回调中遗漏了一些东西 - 我阅读了如何从异步调用返回响应？- 但我看不出我需要它们。也许我将要学习一些非常基础的实用 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
}
4

1 回答 1

0

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

删除函数声明中的 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意味着您的函数将不会被调用，直到经过一定时间后没有进行新调用。

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

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

来自underscorejs 文档：

debounce_.debounce（函数，等待，[立即]）

创建并返回传递函数的新去抖动版本，该版本将推迟其执行，直到自上次调用以来等待毫秒过去后。对于实现仅在输入停止到达后才应发生的行为很有用。例如：渲染 Markdown 注释的预览，在窗口停止调整大小后重新计算布局等等。

为立即参数传递 true 以导致去抖动在等待间隔的前沿而不是后沿触发函数。在防止意外双击“提交”按钮再次触发等情况下很有用。

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

于 2015-01-14T10:37:37.643 回答