Loading... 防抖函数 ```typescript export function debounce<T extends (...args: any) => any>(fn: T, delay = 500) { // timer 是在闭包中的 let timer: any; return function (this: unknown, ...args: any[]) { if (timer) { clearTimeout(timer); } timer = setTimeout(() => { fn.apply(this, args); timer = null; }, delay); } } ``` 节流函数 ```typescript export function throttle<T extends (...args: any) => any>(fn: T, interval: number = 300) { let lock = false; return function (this: unknown, ...args: any[]) { if (lock) return; lock = true; setTimeout(() => lock = false, interval); fn.bind(this)(...args); } } ``` 节流和防抖的结合函数,常用于滚动分页触发用 ```typescript // 进阶节流函数,保证 interval 时间必定触发一次的同时 // 也进行了 节流函数注册后的 防抖处理,以确保最后一次节流触发的时候没达到触发阈值但还能保证加载 export function throttle2<T extends (...args: any) => any>(fn: T, interval: number = 300) { let lock = false; let timer: any; return function (this: unknown, ...args: any[]) { if (!lock) { lock = true; setTimeout(() => lock = false, interval); fn.bind(this)(...args); } else { if (timer) { clearTimeout(timer); } timer = setTimeout(() => { fn.apply(this, args); timer = null; }, interval); } } } ``` sleep函数 ```typescript export function sleep(delay: number) { return new Promise((resolve) => setTimeout(resolve, delay)); } ``` URLParams获取函数 ```typescript export function queryURLParams(URL: string) { let url = URL.split("?")[1]; const urlSearchParams = new URLSearchParams(url); const params = Object.fromEntries(urlSearchParams.entries()); return params; } ``` textarea的tab缩进,shift+tab退格keydown函数封装 ```typescript export function registerTextareaKeydownHandler(textarea: HTMLTextAreaElement) { textarea.onkeydown = event => { if (event.key === "Tab") { const start = textarea.selectionStart; const end = textarea.selectionEnd; const before = textarea.value.substring(0, start); const after = textarea.value.substring(end); const lines = textarea.value.substring(start, end).split("\n"); const isIndent = !event.shiftKey; if (isIndent) { if (start === end || lines.length === 1) { // 未选中内容或选中内容是一行 textarea.value = before + "\t" + after; textarea.setSelectionRange(start + 1, end + 1); //设置选中区域 } else { // 选中多行 const npos = before.lastIndexOf("\n"); const beforeLine = before.substring(0, npos + 1); lines[0] = before.substring(npos + 1) + lines[0]; const tmp = "\t" + lines.join('\n\t'); textarea.value = beforeLine + tmp + after; textarea.setSelectionRange(start + 1, end + lines.length); //设置选中区域 } } else { // 退格 let tmp = ""; let reduceCount = 0; let reduceFirstLine = false; if (lines.length > 1) { lines.forEach((line, index, array) => { if (index > 0 && line.length > 0 && line[0] === '\t') { array[index] = line.substring(1); reduceCount++; } }); tmp = lines.join('\n'); } else { tmp = lines[0]; } let beforeLine = ""; if (before.length > 0) { const npos = before.lastIndexOf('\n'); if (npos !== -1) { beforeLine = before.substring(0, npos + 1); tmp = before.substring(npos + 1) + tmp; } else { tmp = before + tmp; } } // 拼接完整的首行需检查是否能退格 if (tmp.length && tmp[0] === '\t') { tmp = tmp.substring(1); reduceFirstLine = true; } textarea.value = beforeLine + tmp + after; textarea.setSelectionRange(start + (reduceFirstLine ? -1 : 0), end - (reduceCount + (reduceFirstLine ? 1 : 0))); //设置选中区域 } event.preventDefault(); } } } ``` 空格生成函数 ```typescript export function generateSpace(n: number): string { return "".padStart(n, ' '); } ``` Last modification:May 23, 2023 © Allow specification reprint Support Appreciate the author AliPayWeChat Like 如果觉得我的文章对你有用,请随意赞赏
One comment
感觉ts不及js优雅。୧(๑•̀⌄•́๑)૭