mirror of
https://github.com/LemmyNet/lemmy-ui.git
synced 2024-11-22 20:31:13 +00:00
forgot debounce
This commit is contained in:
parent
976ed12d07
commit
6126900bd5
7 changed files with 50 additions and 50 deletions
|
@ -33,7 +33,6 @@ import { FirstLoadService } from "../services/FirstLoadService";
|
||||||
import { HttpService, RequestState } from "../services/HttpService";
|
import { HttpService, RequestState } from "../services/HttpService";
|
||||||
import {
|
import {
|
||||||
Choice,
|
Choice,
|
||||||
debounce,
|
|
||||||
fetchLimit,
|
fetchLimit,
|
||||||
fetchUsers,
|
fetchUsers,
|
||||||
getIdFromString,
|
getIdFromString,
|
||||||
|
@ -43,6 +42,7 @@ import {
|
||||||
personToChoice,
|
personToChoice,
|
||||||
setIsoData,
|
setIsoData,
|
||||||
} from "../utils";
|
} from "../utils";
|
||||||
|
import { debounce } from "../utils/helpers/debounce";
|
||||||
import { getQueryParams } from "../utils/helpers/get-query-params";
|
import { getQueryParams } from "../utils/helpers/get-query-params";
|
||||||
import { getQueryString } from "../utils/helpers/get-query-string";
|
import { getQueryString } from "../utils/helpers/get-query-string";
|
||||||
import { amAdmin } from "../utils/roles/am-admin";
|
import { amAdmin } from "../utils/roles/am-admin";
|
||||||
|
|
|
@ -18,7 +18,6 @@ import {
|
||||||
Choice,
|
Choice,
|
||||||
capitalizeFirstLetter,
|
capitalizeFirstLetter,
|
||||||
communityToChoice,
|
communityToChoice,
|
||||||
debounce,
|
|
||||||
elementUrl,
|
elementUrl,
|
||||||
emDash,
|
emDash,
|
||||||
enableNsfw,
|
enableNsfw,
|
||||||
|
@ -38,6 +37,7 @@ import {
|
||||||
updateCommunityBlock,
|
updateCommunityBlock,
|
||||||
updatePersonBlock,
|
updatePersonBlock,
|
||||||
} from "../../utils";
|
} from "../../utils";
|
||||||
|
import { debounce } from "../../utils/helpers/debounce";
|
||||||
import { HtmlTags } from "../common/html-tags";
|
import { HtmlTags } from "../common/html-tags";
|
||||||
import { Icon, Spinner } from "../common/icon";
|
import { Icon, Spinner } from "../common/icon";
|
||||||
import { ImageUploadForm } from "../common/image-upload-form";
|
import { ImageUploadForm } from "../common/image-upload-form";
|
||||||
|
|
|
@ -18,7 +18,6 @@ import {
|
||||||
archiveTodayUrl,
|
archiveTodayUrl,
|
||||||
capitalizeFirstLetter,
|
capitalizeFirstLetter,
|
||||||
communityToChoice,
|
communityToChoice,
|
||||||
debounce,
|
|
||||||
fetchCommunities,
|
fetchCommunities,
|
||||||
getIdFromString,
|
getIdFromString,
|
||||||
ghostArchiveUrl,
|
ghostArchiveUrl,
|
||||||
|
@ -33,6 +32,7 @@ import {
|
||||||
validURL,
|
validURL,
|
||||||
webArchiveUrl,
|
webArchiveUrl,
|
||||||
} from "../../utils";
|
} from "../../utils";
|
||||||
|
import { debounce } from "../../utils/helpers/debounce";
|
||||||
import { Icon, Spinner } from "../common/icon";
|
import { Icon, Spinner } from "../common/icon";
|
||||||
import { LanguageSelect } from "../common/language-select";
|
import { LanguageSelect } from "../common/language-select";
|
||||||
import { MarkdownTextArea } from "../common/markdown-textarea";
|
import { MarkdownTextArea } from "../common/markdown-textarea";
|
||||||
|
|
|
@ -64,7 +64,6 @@ import {
|
||||||
buildCommentsTree,
|
buildCommentsTree,
|
||||||
commentsToFlatNodes,
|
commentsToFlatNodes,
|
||||||
commentTreeMaxDepth,
|
commentTreeMaxDepth,
|
||||||
debounce,
|
|
||||||
editComment,
|
editComment,
|
||||||
editWith,
|
editWith,
|
||||||
enableDownvotes,
|
enableDownvotes,
|
||||||
|
@ -84,6 +83,7 @@ import {
|
||||||
updatePersonBlock,
|
updatePersonBlock,
|
||||||
} from "../../utils";
|
} from "../../utils";
|
||||||
import { isBrowser } from "../../utils/browser/is-browser";
|
import { isBrowser } from "../../utils/browser/is-browser";
|
||||||
|
import { debounce } from "../../utils/helpers/debounce";
|
||||||
import { CommentForm } from "../comment/comment-form";
|
import { CommentForm } from "../comment/comment-form";
|
||||||
import { CommentNodes } from "../comment/comment-nodes";
|
import { CommentNodes } from "../comment/comment-nodes";
|
||||||
import { HtmlTags } from "../common/html-tags";
|
import { HtmlTags } from "../common/html-tags";
|
||||||
|
|
|
@ -29,7 +29,6 @@ import {
|
||||||
capitalizeFirstLetter,
|
capitalizeFirstLetter,
|
||||||
commentsToFlatNodes,
|
commentsToFlatNodes,
|
||||||
communityToChoice,
|
communityToChoice,
|
||||||
debounce,
|
|
||||||
enableDownvotes,
|
enableDownvotes,
|
||||||
enableNsfw,
|
enableNsfw,
|
||||||
fetchCommunities,
|
fetchCommunities,
|
||||||
|
@ -46,6 +45,7 @@ import {
|
||||||
setIsoData,
|
setIsoData,
|
||||||
showLocal,
|
showLocal,
|
||||||
} from "../utils";
|
} from "../utils";
|
||||||
|
import { debounce } from "../utils/helpers/debounce";
|
||||||
import { getQueryParams } from "../utils/helpers/get-query-params";
|
import { getQueryParams } from "../utils/helpers/get-query-params";
|
||||||
import { getQueryString } from "../utils/helpers/get-query-string";
|
import { getQueryString } from "../utils/helpers/get-query-string";
|
||||||
import type { QueryParams } from "../utils/types/query-params";
|
import type { QueryParams } from "../utils/types/query-params";
|
||||||
|
|
|
@ -44,6 +44,7 @@ import { i18n, languages } from "./i18next";
|
||||||
import { CommentNodeI, DataType, IsoData, VoteType } from "./interfaces";
|
import { CommentNodeI, DataType, IsoData, VoteType } from "./interfaces";
|
||||||
import { HttpService, UserService } from "./services";
|
import { HttpService, UserService } from "./services";
|
||||||
import { isBrowser } from "./utils/browser/is-browser";
|
import { isBrowser } from "./utils/browser/is-browser";
|
||||||
|
import { debounce } from "./utils/helpers/debounce";
|
||||||
import { groupBy } from "./utils/helpers/group-by";
|
import { groupBy } from "./utils/helpers/group-by";
|
||||||
|
|
||||||
let Tribute: any;
|
let Tribute: any;
|
||||||
|
@ -268,51 +269,6 @@ export function getDataTypeString(dt: DataType) {
|
||||||
return dt === DataType.Post ? "Post" : "Comment";
|
return dt === DataType.Post ? "Post" : "Comment";
|
||||||
}
|
}
|
||||||
|
|
||||||
export function debounce<T extends any[], R>(
|
|
||||||
func: (...e: T) => R,
|
|
||||||
wait = 1000,
|
|
||||||
immediate = false
|
|
||||||
) {
|
|
||||||
// 'private' variable for instance
|
|
||||||
// The returned function will be able to reference this due to closure.
|
|
||||||
// Each call to the returned function will share this common timer.
|
|
||||||
let timeout: NodeJS.Timeout | null;
|
|
||||||
|
|
||||||
// Calling debounce returns a new anonymous function
|
|
||||||
return function () {
|
|
||||||
// reference the context and args for the setTimeout function
|
|
||||||
const args = arguments;
|
|
||||||
|
|
||||||
// Should the function be called now? If immediate is true
|
|
||||||
// and not already in a timeout then the answer is: Yes
|
|
||||||
const callNow = immediate && !timeout;
|
|
||||||
|
|
||||||
// This is the basic debounce behavior where you can call this
|
|
||||||
// function several times, but it will only execute once
|
|
||||||
// [before or after imposing a delay].
|
|
||||||
// Each time the returned function is called, the timer starts over.
|
|
||||||
clearTimeout(timeout ?? undefined);
|
|
||||||
|
|
||||||
// Set the new timeout
|
|
||||||
timeout = setTimeout(function () {
|
|
||||||
// Inside the timeout function, clear the timeout variable
|
|
||||||
// which will let the next execution run when in 'immediate' mode
|
|
||||||
timeout = null;
|
|
||||||
|
|
||||||
// Check if the function already ran with the immediate flag
|
|
||||||
if (!immediate) {
|
|
||||||
// Call the original function with apply
|
|
||||||
// apply lets you define the 'this' object as well as the arguments
|
|
||||||
// (both captured before setTimeout)
|
|
||||||
func.apply(this, args);
|
|
||||||
}
|
|
||||||
}, wait);
|
|
||||||
|
|
||||||
// Immediate mode and no wait timer? Execute the function..
|
|
||||||
if (callNow) func.apply(this, args);
|
|
||||||
} as (...e: T) => R;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getLanguages(
|
export function getLanguages(
|
||||||
override?: string,
|
override?: string,
|
||||||
myUserInfo = UserService.Instance.myUserInfo
|
myUserInfo = UserService.Instance.myUserInfo
|
||||||
|
|
44
src/shared/utils/helpers/debounce.ts
Normal file
44
src/shared/utils/helpers/debounce.ts
Normal file
|
@ -0,0 +1,44 @@
|
||||||
|
export function debounce<T extends any[], R>(
|
||||||
|
func: (...e: T) => R,
|
||||||
|
wait = 1000,
|
||||||
|
immediate = false
|
||||||
|
) {
|
||||||
|
// 'private' variable for instance
|
||||||
|
// The returned function will be able to reference this due to closure.
|
||||||
|
// Each call to the returned function will share this common timer.
|
||||||
|
let timeout: NodeJS.Timeout | null;
|
||||||
|
|
||||||
|
// Calling debounce returns a new anonymous function
|
||||||
|
return function () {
|
||||||
|
// reference the context and args for the setTimeout function
|
||||||
|
const args = arguments;
|
||||||
|
|
||||||
|
// Should the function be called now? If immediate is true
|
||||||
|
// and not already in a timeout then the answer is: Yes
|
||||||
|
const callNow = immediate && !timeout;
|
||||||
|
|
||||||
|
// This is the basic debounce behavior where you can call this
|
||||||
|
// function several times, but it will only execute once
|
||||||
|
// [before or after imposing a delay].
|
||||||
|
// Each time the returned function is called, the timer starts over.
|
||||||
|
clearTimeout(timeout ?? undefined);
|
||||||
|
|
||||||
|
// Set the new timeout
|
||||||
|
timeout = setTimeout(function () {
|
||||||
|
// Inside the timeout function, clear the timeout variable
|
||||||
|
// which will let the next execution run when in 'immediate' mode
|
||||||
|
timeout = null;
|
||||||
|
|
||||||
|
// Check if the function already ran with the immediate flag
|
||||||
|
if (!immediate) {
|
||||||
|
// Call the original function with apply
|
||||||
|
// apply lets you define the 'this' object as well as the arguments
|
||||||
|
// (both captured before setTimeout)
|
||||||
|
func.apply(this, args);
|
||||||
|
}
|
||||||
|
}, wait);
|
||||||
|
|
||||||
|
// Immediate mode and no wait timer? Execute the function..
|
||||||
|
if (callNow) func.apply(this, args);
|
||||||
|
} as (...e: T) => R;
|
||||||
|
}
|
Loading…
Reference in a new issue