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，但就我所见，这正是你的问题。

删除函数声明中的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

去抖意味着您的功能将 NOT 被调用，直到经过一段时间没有新来电。< / p>

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

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

来自underscorejs docs：

debounce_.debounce（功能，等待，[立即]）

创建并返回一个   传递函数的新debounced版本将推迟它   执行直到自上次经过等待毫秒之后   它被调用的时间。用于实现仅应该执行的行为   在输入停止到达后发生。例如：渲染a   预览Markdown注释，在窗口后重新计算布局   已停止调整大小等等。

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

var lazyLayout = _.debounce（calculateLayout，300）;   $（窗口）.resize（lazyLayout）;

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

版本1

第2版

第3版

1 个答案: