From b146257fb8ed802048f67de1562723915e586979 Mon Sep 17 00:00:00 2001 From: Marcel Link Date: Sat, 11 Nov 2017 03:16:02 +0100 Subject: [PATCH 1/4] Fix: util.throttle misbehavior --- js/api/api.util.js | 35 ++++++++++++++++++----------------- 1 file changed, 18 insertions(+), 17 deletions(-) diff --git a/js/api/api.util.js b/js/api/api.util.js index 41cabc490..06548f3ac 100644 --- a/js/api/api.util.js +++ b/js/api/api.util.js @@ -21,26 +21,27 @@ DataTable.util = { throttle: function ( fn, freq ) { var frequency = freq !== undefined ? freq : 200, - last, + call, + that, timer; - return function () { - var - that = this, - now = +new Date(), - args = arguments; - - if ( last && now < last + frequency ) { - clearTimeout( timer ); + function timeout() { + fn.apply( that, call ); + call = undefined; + that = undefined; + timer = setTimeout( function () { + timer = undefined; + if ( call ) { + timeout(); + } + }, frequency ); + } - timer = setTimeout( function () { - last = undefined; - fn.apply( that, args ); - }, frequency ); - } - else { - last = now; - fn.apply( that, args ); + return function () { + that = this; + call = arguments; + if ( !timer ) { + timeout(); } }; }, From 5f1db84a14308f5a444f870ffe6e78fd67444427 Mon Sep 17 00:00:00 2001 From: Marcel Link Date: Sun, 12 Nov 2017 18:50:08 +0100 Subject: [PATCH 2/4] New: $.fn.dataTable.util.debounce() --- js/DataTables.js | 2 +- js/api/api.internal.js | 1 + js/api/api.util.js | 26 ++++++++++++++++++++++++++ js/core/core.sizing.js | 9 +++++++++ 4 files changed, 37 insertions(+), 1 deletion(-) diff --git a/js/DataTables.js b/js/DataTables.js index b3e30d406..796b480c9 100644 --- a/js/DataTables.js +++ b/js/DataTables.js @@ -22,7 +22,7 @@ */ /*jslint evil: true, undef: true, browser: true */ -/*globals $,require,jQuery,define,_selector_run,_selector_opts,_selector_first,_selector_row_indexes,_ext,_Api,_api_register,_api_registerPlural,_re_new_lines,_re_html,_re_formatted_numeric,_re_escape_regex,_empty,_intVal,_numToDecimal,_isNumber,_isHtml,_htmlNumeric,_pluck,_pluck_order,_range,_stripHtml,_unique,_fnBuildAjax,_fnAjaxUpdate,_fnAjaxParameters,_fnAjaxUpdateDraw,_fnAjaxDataSrc,_fnAddColumn,_fnColumnOptions,_fnAdjustColumnSizing,_fnVisibleToColumnIndex,_fnColumnIndexToVisible,_fnVisbleColumns,_fnGetColumns,_fnColumnTypes,_fnApplyColumnDefs,_fnHungarianMap,_fnCamelToHungarian,_fnLanguageCompat,_fnBrowserDetect,_fnAddData,_fnAddTr,_fnNodeToDataIndex,_fnNodeToColumnIndex,_fnGetCellData,_fnSetCellData,_fnSplitObjNotation,_fnGetObjectDataFn,_fnSetObjectDataFn,_fnGetDataMaster,_fnClearTable,_fnDeleteIndex,_fnInvalidate,_fnGetRowElements,_fnCreateTr,_fnBuildHead,_fnDrawHead,_fnDraw,_fnReDraw,_fnAddOptionsHtml,_fnDetectHeader,_fnGetUniqueThs,_fnFeatureHtmlFilter,_fnFilterComplete,_fnFilterCustom,_fnFilterColumn,_fnFilter,_fnFilterCreateSearch,_fnEscapeRegex,_fnFilterData,_fnFeatureHtmlInfo,_fnUpdateInfo,_fnInfoMacros,_fnInitialise,_fnInitComplete,_fnLengthChange,_fnFeatureHtmlLength,_fnFeatureHtmlPaginate,_fnPageChange,_fnFeatureHtmlProcessing,_fnProcessingDisplay,_fnFeatureHtmlTable,_fnScrollDraw,_fnApplyToChildren,_fnCalculateColumnWidths,_fnThrottle,_fnConvertToWidth,_fnGetWidestNode,_fnGetMaxLenString,_fnStringToCss,_fnSortFlatten,_fnSort,_fnSortAria,_fnSortListener,_fnSortAttachListener,_fnSortingClasses,_fnSortData,_fnSaveState,_fnLoadState,_fnSettingsFromNode,_fnLog,_fnMap,_fnBindAction,_fnCallbackReg,_fnCallbackFire,_fnLengthOverflow,_fnRenderer,_fnDataSource,_fnRowAttributes*/ +/*globals $,require,jQuery,define,_selector_run,_selector_opts,_selector_first,_selector_row_indexes,_ext,_Api,_api_register,_api_registerPlural,_re_new_lines,_re_html,_re_formatted_numeric,_re_escape_regex,_empty,_intVal,_numToDecimal,_isNumber,_isHtml,_htmlNumeric,_pluck,_pluck_order,_range,_stripHtml,_unique,_fnBuildAjax,_fnAjaxUpdate,_fnAjaxParameters,_fnAjaxUpdateDraw,_fnAjaxDataSrc,_fnAddColumn,_fnColumnOptions,_fnAdjustColumnSizing,_fnVisibleToColumnIndex,_fnColumnIndexToVisible,_fnVisbleColumns,_fnGetColumns,_fnColumnTypes,_fnApplyColumnDefs,_fnHungarianMap,_fnCamelToHungarian,_fnLanguageCompat,_fnBrowserDetect,_fnAddData,_fnAddTr,_fnNodeToDataIndex,_fnNodeToColumnIndex,_fnGetCellData,_fnSetCellData,_fnSplitObjNotation,_fnGetObjectDataFn,_fnSetObjectDataFn,_fnGetDataMaster,_fnClearTable,_fnDeleteIndex,_fnInvalidate,_fnGetRowElements,_fnCreateTr,_fnBuildHead,_fnDrawHead,_fnDraw,_fnReDraw,_fnAddOptionsHtml,_fnDetectHeader,_fnGetUniqueThs,_fnFeatureHtmlFilter,_fnFilterComplete,_fnFilterCustom,_fnFilterColumn,_fnFilter,_fnFilterCreateSearch,_fnEscapeRegex,_fnFilterData,_fnFeatureHtmlInfo,_fnUpdateInfo,_fnInfoMacros,_fnInitialise,_fnInitComplete,_fnLengthChange,_fnFeatureHtmlLength,_fnFeatureHtmlPaginate,_fnPageChange,_fnFeatureHtmlProcessing,_fnProcessingDisplay,_fnFeatureHtmlTable,_fnScrollDraw,_fnApplyToChildren,_fnCalculateColumnWidths,_fnThrottle,_fnDebounce,_fnConvertToWidth,_fnGetWidestNode,_fnGetMaxLenString,_fnStringToCss,_fnSortFlatten,_fnSort,_fnSortAria,_fnSortListener,_fnSortAttachListener,_fnSortingClasses,_fnSortData,_fnSaveState,_fnLoadState,_fnSettingsFromNode,_fnLog,_fnMap,_fnBindAction,_fnCallbackReg,_fnCallbackFire,_fnLengthOverflow,_fnRenderer,_fnDataSource,_fnRowAttributes*/ (function( factory ) { "use strict"; diff --git a/js/api/api.internal.js b/js/api/api.internal.js index 6bef3fa13..6b55f4cc0 100644 --- a/js/api/api.internal.js +++ b/js/api/api.internal.js @@ -95,6 +95,7 @@ $.extend( DataTable.ext.internal, { _fnApplyToChildren: _fnApplyToChildren, _fnCalculateColumnWidths: _fnCalculateColumnWidths, _fnThrottle: _fnThrottle, + _fnDebounce: _fnDebounce, _fnConvertToWidth: _fnConvertToWidth, _fnGetWidestNode: _fnGetWidestNode, _fnGetMaxLenString: _fnGetMaxLenString, diff --git a/js/api/api.util.js b/js/api/api.util.js index 06548f3ac..658030dc1 100644 --- a/js/api/api.util.js +++ b/js/api/api.util.js @@ -47,6 +47,32 @@ DataTable.util = { }, + /** + * Debounce the calls to a function. Arguments and context are maintained + * for the debounced function. + * + * @param {function} fn Function to be called + * @param {integer} wait Wait after last call in mS + * @return {function} Wrapped function + */ + debounce: function ( fn, wait ) { + var timer; + + wait = wait !== undefined ? wait : 200; + + return function () { + var args = arguments; + var that = this; + if ( timer ) { + clearTimeout(timer); + } + timer = setTimeout( function () { + timer = undefined; + fn.apply( that, args ); + }, wait ); + }; + }, + /** * Escape a string such that it can be used in a regular expression * diff --git a/js/core/core.sizing.js b/js/core/core.sizing.js index a54c051a0..d3453fc92 100644 --- a/js/core/core.sizing.js +++ b/js/core/core.sizing.js @@ -238,6 +238,15 @@ function _fnCalculateColumnWidths ( oSettings ) */ var _fnThrottle = DataTable.util.throttle; +/** + * Debounce the calls to a function. Arguments and context are maintained for + * the debounced function + * @param {function} fn Function to be called + * @param {int} [wait=200] Wait after last call in mS + * @returns {function} wrapped function + * @memberof DataTable#oApi + */ +var _fnDebounce = DataTable.util.debounce; /** * Convert a CSS unit width to pixels (e.g. 2em) From 459c09104d09605b68feb369059619a030493d20 Mon Sep 17 00:00:00 2001 From: Marcel Link Date: Sun, 12 Nov 2017 18:51:27 +0100 Subject: [PATCH 3/4] Cleanup: $.fn.dataTable.util.throttle() unecessary var --- js/api/api.util.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/js/api/api.util.js b/js/api/api.util.js index 658030dc1..5c0c1877e 100644 --- a/js/api/api.util.js +++ b/js/api/api.util.js @@ -20,11 +20,12 @@ DataTable.util = { */ throttle: function ( fn, freq ) { var - frequency = freq !== undefined ? freq : 200, call, that, timer; + freq = freq !== undefined ? freq : 200; + function timeout() { fn.apply( that, call ); call = undefined; @@ -34,7 +35,7 @@ DataTable.util = { if ( call ) { timeout(); } - }, frequency ); + }, freq ); } return function () { From 5b7c04abd394a4e268e59603bbd6e6019a259dec Mon Sep 17 00:00:00 2001 From: Marcel Link Date: Sun, 12 Nov 2017 18:51:59 +0100 Subject: [PATCH 4/4] Change: search - debounce instead of throttle --- js/core/core.filter.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/core/core.filter.js b/js/core/core.filter.js index c4eef6d73..86d3a7873 100644 --- a/js/core/core.filter.js +++ b/js/core/core.filter.js @@ -57,7 +57,7 @@ function _fnFeatureHtmlFilter ( settings ) .on( 'keyup.DT search.DT input.DT paste.DT cut.DT', searchDelay ? - _fnThrottle( searchFn, searchDelay ) : + _fnDebounce( searchFn, searchDelay ) : searchFn ) .on( 'keypress.DT', function(e) {