refactor: use utils.debounce

fixes socket message spam in chat resize

public/src/admin/manage/groups.js

@@ -7,8 +7,6 @@ define('admin/manage/groups', [
 ], function (categorySelector, slugify, api) {
 	var	Groups = {};
 
-	var intervalId = 0;
-
 	Groups.init = function () {
 		var	createModal = $('#create-modal');
 		var createGroupName = $('#create-group-name');
@@ -114,13 +112,7 @@ define('admin/manage/groups', [
 			});
 		}
 
-		queryEl.on('keyup', function () {
+		queryEl.on('keyup', utils.debounce(doSearch, 200));
-			if (intervalId) {
-				clearTimeout(intervalId);
-				intervalId = 0;
-			}
-			intervalId = setTimeout(doSearch, 200);
-		});
 	}
 
 

public/src/admin/manage/tags.js

@@ -6,7 +6,6 @@ define('admin/manage/tags', [
 	'admin/modules/selectable',
 ], function (infinitescroll, selectable) {
 	var	Tags = {};
-	var timeoutId = 0;
 
 	Tags.init = function () {
 		selectable.enable('.tag-management', '.tag-row');
@@ -53,32 +52,23 @@ define('admin/manage/tags', [
 	}
 
 	function handleSearch() {
-		$('#tag-search').on('input propertychange', function () {
+		$('#tag-search').on('input propertychange', utils.debounce(function () {
-			if (timeoutId) {
+			socket.emit('topics.searchAndLoadTags', {
-				clearTimeout(timeoutId);
+				query: $('#tag-search').val(),
-				timeoutId = 0;
+			}, function (err, result) {
-			}
+				if (err) {
-
+					return app.alertError(err.message);
-			timeoutId = setTimeout(function () {
+				}
-				socket.emit('topics.searchAndLoadTags', {
-					query: $('#tag-search').val(),
-				}, function (err, result) {
-					if (err) {
-						return app.alertError(err.message);
-					}
-
-					app.parseAndTranslate('admin/manage/tags', 'tags', {
-						tags: result.tags,
-					}, function (html) {
-						$('.tag-list').html(html);
-						utils.makeNumbersHumanReadable(html.find('.human-readable-number'));
-						timeoutId = 0;
 
-						selectable.enable('.tag-management', '.tag-row');
+				app.parseAndTranslate('admin/manage/tags', 'tags', {
-					});
+					tags: result.tags,
+				}, function (html) {
+					$('.tag-list').html(html);
+					utils.makeNumbersHumanReadable(html.find('.human-readable-number'));
+					selectable.enable('.tag-management', '.tag-row');
 				});
-			}, 250);
+			});
-		});
+		}, 250));
 	}
 
 	function handleRename() {

public/src/admin/manage/users.js

@@ -412,7 +412,6 @@ define('admin/manage/users', [
 	};
 
 	function handleSearch() {
-		var timeoutId = 0;
 		function doSearch() {
 			$('.fa-spinner').removeClass('hidden');
 			loadSearchPage({
@@ -421,16 +420,8 @@ define('admin/manage/users', [
 				page: 1,
 			});
 		}
-		$('#user-search').on('keyup', function () {
+		$('#user-search').on('keyup', utils.debounce(doSearch, 250));
-			if (timeoutId !== 0) {
+		$('#user-search-by').on('change', doSearch);
-				clearTimeout(timeoutId);
-				timeoutId = 0;
-			}
-			timeoutId = setTimeout(doSearch, 250);
-		});
-		$('#user-search-by').on('change', function () {
-			doSearch();
-		});
 	}
 
 	function loadSearchPage(query) {

public/src/app.js

@@ -485,7 +485,6 @@ app.cacheBuster = null;
 		var searchOptions = Object.assign({ in: config.searchDefaultInQuick || 'titles' }, options.searchOptions);
 		var quickSearchResults = options.searchElements.resultEl;
 		var inputEl = options.searchElements.inputEl;
-		var searchTimeoutId = 0;
 		var oldValue = inputEl.val();
 		var filterCategoryEl = quickSearchResults.find('.filter-category');
 
@@ -556,27 +555,21 @@ app.cacheBuster = null;
 			doSearch();
 		});
 
-		inputEl.off('keyup').on('keyup', function () {
+		inputEl.off('keyup').on('keyup', utils.debounce(function () {
-			if (searchTimeoutId) {
+			if (inputEl.val().length < 3) {
-				clearTimeout(searchTimeoutId);
+				quickSearchResults.addClass('hidden');
-				searchTimeoutId = 0;
-			}
-			searchTimeoutId = setTimeout(function () {
-				if (inputEl.val().length < 3) {
-					quickSearchResults.addClass('hidden');
-					oldValue = inputEl.val();
-					return;
-				}
-				if (inputEl.val() === oldValue) {
-					return;
-				}
 				oldValue = inputEl.val();
-				if (!inputEl.is(':focus')) {
+				return;
-					return quickSearchResults.addClass('hidden');
+			}
-				}
+			if (inputEl.val() === oldValue) {
-				doSearch();
+				return;
-			}, 250);
+			}
-		});
+			oldValue = inputEl.val();
+			if (!inputEl.is(':focus')) {
+				return quickSearchResults.addClass('hidden');
+			}
+			doSearch();
+		}, 250));
 
 		var mousedownOnResults = false;
 		quickSearchResults.on('mousedown', function () {

public/src/client/chats.js

@@ -30,6 +30,7 @@ define('forum/chats', [
 
 		Chats.addEventListeners();
 		Chats.resizeMainWindow();
+		Chats.setActive();
 
 		if (env === 'md' || env === 'lg') {
 			Chats.addHotkeys();
@@ -452,7 +453,7 @@ define('forum/chats', [
 	};
 
 	Chats.addGlobalEventListeners = function () {
-		$(window).on('resize', Chats.resizeMainWindow);
+		$(window).on('resize', utils.throttle(Chats.resizeMainWindow, 100));
 		$(window).on('mousemove keypress click', function () {
 			if (newMessage && ajaxify.data.roomId) {
 				socket.emit('modules.chats.markRead', ajaxify.data.roomId);
@@ -514,8 +515,6 @@ define('forum/chats', [
 		}
 
 		$('.chats-full').height(viewportHeight - fromTop - 1);
-
-		Chats.setActive();
 	};
 
 	Chats.setActive = function () {

public/src/client/chats/search.js

@@ -5,16 +5,7 @@ define('forum/chats/search', ['components', 'api'], function (components, api) {
 	var search = {};
 
 	search.init = function () {
-		var timeoutId = 0;
+		components.get('chat/search').on('keyup', utils.debounce(doSearch, 250));
-
-		components.get('chat/search').on('keyup', function () {
-			if (timeoutId) {
-				clearTimeout(timeoutId);
-				timeoutId = 0;
-			}
-
-			timeoutId = setTimeout(doSearch, 250);
-		});
 	};
 
 	function doSearch() {

public/src/client/tags.js

@@ -3,32 +3,22 @@
 
 define('forum/tags', ['forum/infinitescroll'], function (infinitescroll) {
 	var Tags = {};
-	var timeoutId = 0;
 
 	Tags.init = function () {
 		app.enterRoom('tags');
 		$('#tag-search').focus();
-		$('#tag-search').on('input propertychange', function () {
+		$('#tag-search').on('input propertychange', utils.debounce(function () {
-			if (timeoutId) {
-				clearTimeout(timeoutId);
-				timeoutId = 0;
-			}
-
 			if (!$('#tag-search').val().length) {
 				return resetSearch();
 			}
 
-			timeoutId = setTimeout(function () {
+			socket.emit('topics.searchAndLoadTags', { query: $('#tag-search').val() }, function (err, results) {
-				socket.emit('topics.searchAndLoadTags', { query: $('#tag-search').val() }, function (err, results) {
+				if (err) {
-					if (err) {
+					return app.alertError(err.message);
-						return app.alertError(err.message);
+				}
-					}
+				onTagsLoaded(results.tags, true);
-					onTagsLoaded(results.tags, true, function () {
+			});
-						timeoutId = 0;
+		}, 250));
-					});
-				});
-			}, 250);
-		});
 
 		infinitescroll.init(Tags.loadMoreTags);
 	};

public/src/client/users.js

@@ -6,16 +6,8 @@ define('forum/users', [
 ], function (translator, Benchpress, api, AccountInvite) {
 	var	Users = {};
 
-	var searchTimeoutID = 0;
 	var searchResultCount = 0;
 
-	$(window).on('action:ajaxify.start', function () {
-		if (searchTimeoutID) {
-			clearTimeout(searchTimeoutID);
-			searchTimeoutID = 0;
-		}
-	});
-
 	Users.init = function () {
 		app.enterRoom('user_list');
 
@@ -33,23 +25,14 @@ define('forum/users', [
 
 	Users.handleSearch = function (params) {
 		searchResultCount = params && params.resultCount;
-		searchTimeoutID = 0;
+		$('#search-user').on('keyup', utils.debounce(doSearch, 250));
-
+		$('.search select, .search input[type="checkbox"]').on('change', doSearch);
-		$('#search-user').on('keyup', function () {
-			if (searchTimeoutID) {
-				clearTimeout(searchTimeoutID);
-				searchTimeoutID = 0;
-			}
-
-			searchTimeoutID = setTimeout(doSearch, 250);
-		});
-
-		$('.search select, .search input[type="checkbox"]').on('change', function () {
-			doSearch();
-		});
 	};
 
 	function doSearch() {
+		if (!ajaxify.data.template.users) {
+			return;
+		}
 		$('[component="user/search/icon"]').removeClass('fa-search').addClass('fa-spinner fa-spin');
 		var username = $('#search-user').val();
 		var activeSection = getActiveSection();

public/src/utils.js

@@ -771,6 +771,26 @@
 				}
 			};
 		},
+		throttle: function (func, wait, immediate) {
+			var timeout;
+			return function () {
+				var context = this;
+				var args = arguments;
+				var later = function () {
+					timeout = null;
+					if (!immediate) {
+						func.apply(context, args);
+					}
+				};
+				var callNow = immediate && !timeout;
+				if (!timeout) {
+					timeout = setTimeout(later, wait);
+				}
+				if (callNow) {
+					func.apply(context, args);
+				}
+			};
+		},
 	};
 
 	return utils;