@etsoo/shared 1.2.45 → 1.2.47

package/README.md

@@ -120,6 +120,8 @@ Data type definitions and type safe functions. ListItemType, ListItemType1 and L
 |DataType|Data type enum|
 |AddAndEditType|Add and edit data type|
 |AddOrEditType|Add or edit conditional type|
+|addUrlParam|Add parameter to URL|
+|addUrlParams|Add parameters to URL|
 |Basic|Basic types, includes number, bigint, Date, boolean, string|
 |BasicArray|Basic type name array|
 |BasicConditional|Conditional type based on BasicNames|
@@ -241,8 +243,10 @@ Extend current class/object functioning
 |---:|---|
 |applyMixins|Apply mixins to current class|
 |delayedExecutor|Create delayed executor|
+|intervalFor|Repeat interval for callback|
 |promiseHandler|Promise handler to catch error|
 |sleep|Delay promise|
+|waitFor|Wait for condition meets and execute callback|
 
 ## NumberUtils
 Numbers related utilities

package/__tests__/Utils.ts

@@ -13,6 +13,54 @@ test('Tests for addBlankItem', () => {
     expect(options.length).toBe(3);
 });
 
+test('Tests for addUrlParam', () => {
+    const url = 'https://www.etsoo.com';
+    const result = Utils.addUrlParam(url, 'a', 'b');
+    expect(result).toBe('https://www.etsoo.com/?a=b');
+});
+
+describe('Tests for addUrlParams', () => {
+    const url = 'https://www.etsoo.com';
+    const data = {
+        a: 'a',
+        b: false,
+        c: 123,
+        d: new Date(Date.UTC(2022, 0, 28, 10)),
+        e: [1, 2],
+        f: ['a', 'b'],
+        g: null
+    };
+    const result1 = Utils.addUrlParams(url, data);
+
+    test('addUrlParams', () => {
+        expect(result1).toBe(
+            'https://www.etsoo.com/?a=a&b=false&c=123&d=2022-01-28T10%3A00%3A00.000Z&e=1&e=2&f=a&f=b&g='
+        );
+    });
+
+    const result2 = Utils.addUrlParams(url, data, true);
+
+    test('addUrlParams with array format', () => {
+        expect(result2).toBe(
+            'https://www.etsoo.com/?a=a&b=false&c=123&d=2022-01-28T10%3A00%3A00.000Z&e=1%2C2&f=a%2Cb&g='
+        );
+    });
+
+    global.URL = undefined as any;
+
+    const result3 = url.addUrlParams(data);
+
+    test('addUrlParams with traditional way', () => {
+        expect(result3).toBe(result1);
+    });
+
+    const result4 = url.addUrlParams(data, true);
+
+    test('addUrlParams with traditional way and array format', () => {
+        expect(result4).toBe(result2);
+    });
+});
+
 test('Tests for containChinese', () => {
     expect('123 abC'.containChinese()).toBeFalsy();
     expect('亿速思维'.containChinese()).toBeTruthy();

package/lib/cjs/ExtendUtils.d.ts

@@ -31,8 +31,15 @@ export declare namespace ExtendUtils {
      * Wait for condition meets and execute callback
      * requestAnimationFrame to replace setTimeout
      * @param callback Callback
-     * @param checkReady Check ready, when it's a number, similar to setTimeout
+     * @param checkReady Check ready, when it's a number as miliseconds, similar to setTimeout
      * @returns cancel callback
      */
     function waitFor(callback: () => void, checkReady: ((spanTime: number) => boolean) | number): () => void;
+    /**
+     * Repeat interval for callback
+     * @param callback Callback
+     * @param miliseconds Miliseconds
+     * @returns cancel callback
+     */
+    function intervalFor(callback: () => void, miliseconds: number): () => void;
 }

package/lib/cjs/ExtendUtils.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ExtendUtils = void 0;
+const hasRequestAnimationFrame = typeof requestAnimationFrame === 'function';
 /**
  * Extend utilities
  */
@@ -85,38 +86,113 @@ var ExtendUtils;
      * Wait for condition meets and execute callback
      * requestAnimationFrame to replace setTimeout
      * @param callback Callback
-     * @param checkReady Check ready, when it's a number, similar to setTimeout
+     * @param checkReady Check ready, when it's a number as miliseconds, similar to setTimeout
      * @returns cancel callback
      */
     function waitFor(callback, checkReady) {
-        let startTime;
         let requestID;
-        function doWait(time) {
-            // Reset request id
-            requestID = undefined;
-            // First time
-            if (startTime == null)
-                startTime = time;
-            // Ignore
-            if (startTime === 0)
-                return;
-            const spanTime = startTime == null || time == null ? 0 : time - startTime;
-            if (time != null &&
-                (typeof checkReady === 'number'
-                    ? spanTime >= checkReady
-                    : checkReady(spanTime))) {
-                callback();
+        if (hasRequestAnimationFrame) {
+            let lastTime;
+            function loop(timestamp) {
+                // Cancelled
+                if (requestID == null)
+                    return;
+                if (lastTime === undefined) {
+                    lastTime = timestamp;
+                }
+                const elapsed = timestamp - lastTime;
+                const isReady = typeof checkReady === 'number'
+                    ? elapsed >= checkReady
+                    : checkReady(elapsed);
+                if (isReady) {
+                    callback();
+                }
+                else if (requestID != null) {
+                    // May also be cancelled in callback or somewhere
+                    requestID = requestAnimationFrame(loop);
+                }
             }
-            else {
-                requestID = requestAnimationFrame(doWait);
+            requestID = requestAnimationFrame(loop);
+        }
+        else if (typeof checkReady === 'number') {
+            requestID = setTimeout(callback, checkReady);
+        }
+        else {
+            // Bad practice to use setTimeout in this way, only for compatibility
+            const ms = 20;
+            let spanTime = 0;
+            let cr = checkReady;
+            function loop() {
+                // Cancelled
+                if (requestID == null)
+                    return;
+                spanTime += ms;
+                if (cr(spanTime)) {
+                    callback();
+                }
+                else if (requestID != null) {
+                    // May also be cancelled in callback or somewhere
+                    requestID = setTimeout(loop, ms);
+                }
             }
+            requestID = setTimeout(loop, ms);
         }
-        doWait();
         return () => {
-            if (requestID)
-                cancelAnimationFrame(requestID);
-            startTime = undefined;
+            if (requestID) {
+                if (hasRequestAnimationFrame && typeof requestID === 'number') {
+                    cancelAnimationFrame(requestID);
+                }
+                else {
+                    clearTimeout(requestID);
+                }
+                requestID = undefined;
+            }
         };
     }
     ExtendUtils.waitFor = waitFor;
+    /**
+     * Repeat interval for callback
+     * @param callback Callback
+     * @param miliseconds Miliseconds
+     * @returns cancel callback
+     */
+    function intervalFor(callback, miliseconds) {
+        let requestID;
+        if (hasRequestAnimationFrame) {
+            let lastTime;
+            function loop(timestamp) {
+                // Cancelled
+                if (requestID == null)
+                    return;
+                if (lastTime === undefined) {
+                    lastTime = timestamp;
+                }
+                const elapsed = timestamp - lastTime;
+                if (elapsed >= miliseconds) {
+                    lastTime = timestamp;
+                    callback();
+                }
+                if (requestID != null) {
+                    // May also be cancelled in callback or somewhere
+                    requestID = requestAnimationFrame(loop);
+                }
+            }
+            requestID = requestAnimationFrame(loop);
+        }
+        else {
+            requestID = setInterval(callback, miliseconds);
+        }
+        return () => {
+            if (requestID) {
+                if (hasRequestAnimationFrame && typeof requestID === 'number') {
+                    cancelAnimationFrame(requestID);
+                }
+                else {
+                    clearInterval(requestID);
+                }
+                requestID = undefined;
+            }
+        };
+    }
+    ExtendUtils.intervalFor = intervalFor;
 })(ExtendUtils || (exports.ExtendUtils = ExtendUtils = {}));

package/lib/cjs/Utils.d.ts

@@ -2,6 +2,23 @@ import { DataTypes, IdType } from './DataTypes';
 import { ParsedPath } from './types/ParsedPath';
 declare global {
     interface String {
+        /**
+         * Add parameter to URL
+         * @param this URL to add parameter
+         * @param name Parameter name
+         * @param value Parameter value
+         * @param arrayFormat Array format to array style or not to multiple fields
+         * @returns New URL
+         */
+        addUrlParam(this: string, name: string, value: DataTypes.Simple, arrayFormat?: boolean | string): string;
+        /**
+         * Add parameters to URL
+         * @param this URL to add parameters
+         * @param data Parameters
+         * @param arrayFormat Array format to array style or not to multiple fields
+         * @returns New URL
+         */
+        addUrlParams(this: string, data: DataTypes.SimpleObject, arrayFormat?: boolean | string): string;
         /**
          * Check the input string contains Chinese character or not
          * @param this Input
@@ -73,6 +90,23 @@ export declare namespace Utils {
      * @param blankLabel Blank label, default is ---
      */
     function addBlankItem<T extends object>(options: T[], idField?: string | keyof T, labelField?: unknown, blankLabel?: string): T[];
+    /**
+     * Add parameter to URL
+     * @param url URL to add parameter
+     * @param name Parameter name
+     * @param value Parameter value
+     * @param arrayFormat Array format to array style or not to multiple fields
+     * @returns New URL
+     */
+    function addUrlParam(url: string, name: string, value: DataTypes.Simple, arrayFormat?: boolean | string): string;
+    /**
+     * Add parameters to URL
+     * @param url URL to add parameters
+     * @param data Parameters
+     * @param arrayFormat Array format to array style or not to multiple fields
+     * @returns New URL
+     */
+    function addUrlParams(url: string, data: DataTypes.SimpleObject, arrayFormat?: boolean | string): string;
     /**
      * Base64 chars to number
      * @param base64Chars Base64 chars

package/lib/cjs/Utils.js

@@ -7,6 +7,12 @@ exports.Utils = void 0;
 const DataTypes_1 = require("./DataTypes");
 const lodash_isequal_1 = __importDefault(require("lodash.isequal"));
 const DateUtils_1 = require("./DateUtils");
+String.prototype.addUrlParam = function (name, value, arrayFormat) {
+    return Utils.addUrlParam(this, name, value, arrayFormat);
+};
+String.prototype.addUrlParams = function (data, arrayFormat) {
+    return Utils.addUrlParams(this, data, arrayFormat);
+};
 String.prototype.containChinese = function () {
     const regExp = /[\u3040-\u30ff\u3400-\u4dbf\u4e00-\u9fff\uf900-\ufaff\uff66-\uff9f]/g;
     return regExp.test(this);
@@ -89,6 +95,83 @@ var Utils;
         return options;
     }
     Utils.addBlankItem = addBlankItem;
+    /**
+     * Add parameter to URL
+     * @param url URL to add parameter
+     * @param name Parameter name
+     * @param value Parameter value
+     * @param arrayFormat Array format to array style or not to multiple fields
+     * @returns New URL
+     */
+    function addUrlParam(url, name, value, arrayFormat) {
+        return addUrlParams(url, { [name]: value }, arrayFormat);
+    }
+    Utils.addUrlParam = addUrlParam;
+    /**
+     * Add parameters to URL
+     * @param url URL to add parameters
+     * @param data Parameters
+     * @param arrayFormat Array format to array style or not to multiple fields
+     * @returns New URL
+     */
+    function addUrlParams(url, data, arrayFormat) {
+        if (typeof URL === 'undefined') {
+            if (url.includes('?')) {
+                url += '&';
+            }
+            else {
+                if (!url.endsWith('/'))
+                    url = url + '/';
+                url += '?';
+            }
+            url += Object.entries(data)
+                .map(([key, value]) => {
+                let v;
+                if (Array.isArray(value)) {
+                    if (arrayFormat == null || arrayFormat === false) {
+                        return value
+                            .map((item) => `${key}=${encodeURIComponent(`${item}`)}`)
+                            .join('&');
+                    }
+                    else {
+                        v = value.join(arrayFormat ? ',' : arrayFormat);
+                    }
+                }
+                else if (value instanceof Date) {
+                    v = value.toJSON();
+                }
+                else {
+                    v = value == null ? '' : `${value}`;
+                }
+                return `${key}=${encodeURIComponent(v)}`;
+            })
+                .join('&');
+            return url;
+        }
+        else {
+            const urlObj = new URL(url);
+            Object.entries(data).forEach(([key, value]) => {
+                if (Array.isArray(value)) {
+                    if (arrayFormat == null || arrayFormat === false) {
+                        value.forEach((item) => {
+                            urlObj.searchParams.append(key, `${item}`);
+                        });
+                    }
+                    else {
+                        urlObj.searchParams.append(key, value.join(arrayFormat ? ',' : arrayFormat));
+                    }
+                }
+                else if (value instanceof Date) {
+                    urlObj.searchParams.append(key, value.toJSON());
+                }
+                else {
+                    urlObj.searchParams.append(key, `${value == null ? '' : value}`);
+                }
+            });
+            return urlObj.toString();
+        }
+    }
+    Utils.addUrlParams = addUrlParams;
     /**
      * Base64 chars to number
      * @param base64Chars Base64 chars

package/lib/mjs/ExtendUtils.d.ts

@@ -31,8 +31,15 @@ export declare namespace ExtendUtils {
      * Wait for condition meets and execute callback
      * requestAnimationFrame to replace setTimeout
      * @param callback Callback
-     * @param checkReady Check ready, when it's a number, similar to setTimeout
+     * @param checkReady Check ready, when it's a number as miliseconds, similar to setTimeout
      * @returns cancel callback
      */
     function waitFor(callback: () => void, checkReady: ((spanTime: number) => boolean) | number): () => void;
+    /**
+     * Repeat interval for callback
+     * @param callback Callback
+     * @param miliseconds Miliseconds
+     * @returns cancel callback
+     */
+    function intervalFor(callback: () => void, miliseconds: number): () => void;
 }

package/lib/mjs/ExtendUtils.js

@@ -1,3 +1,4 @@
+const hasRequestAnimationFrame = typeof requestAnimationFrame === 'function';
 /**
  * Extend utilities
  */
@@ -82,38 +83,113 @@ export var ExtendUtils;
      * Wait for condition meets and execute callback
      * requestAnimationFrame to replace setTimeout
      * @param callback Callback
-     * @param checkReady Check ready, when it's a number, similar to setTimeout
+     * @param checkReady Check ready, when it's a number as miliseconds, similar to setTimeout
      * @returns cancel callback
      */
     function waitFor(callback, checkReady) {
-        let startTime;
         let requestID;
-        function doWait(time) {
-            // Reset request id
-            requestID = undefined;
-            // First time
-            if (startTime == null)
-                startTime = time;
-            // Ignore
-            if (startTime === 0)
-                return;
-            const spanTime = startTime == null || time == null ? 0 : time - startTime;
-            if (time != null &&
-                (typeof checkReady === 'number'
-                    ? spanTime >= checkReady
-                    : checkReady(spanTime))) {
-                callback();
+        if (hasRequestAnimationFrame) {
+            let lastTime;
+            function loop(timestamp) {
+                // Cancelled
+                if (requestID == null)
+                    return;
+                if (lastTime === undefined) {
+                    lastTime = timestamp;
+                }
+                const elapsed = timestamp - lastTime;
+                const isReady = typeof checkReady === 'number'
+                    ? elapsed >= checkReady
+                    : checkReady(elapsed);
+                if (isReady) {
+                    callback();
+                }
+                else if (requestID != null) {
+                    // May also be cancelled in callback or somewhere
+                    requestID = requestAnimationFrame(loop);
+                }
             }
-            else {
-                requestID = requestAnimationFrame(doWait);
+            requestID = requestAnimationFrame(loop);
+        }
+        else if (typeof checkReady === 'number') {
+            requestID = setTimeout(callback, checkReady);
+        }
+        else {
+            // Bad practice to use setTimeout in this way, only for compatibility
+            const ms = 20;
+            let spanTime = 0;
+            let cr = checkReady;
+            function loop() {
+                // Cancelled
+                if (requestID == null)
+                    return;
+                spanTime += ms;
+                if (cr(spanTime)) {
+                    callback();
+                }
+                else if (requestID != null) {
+                    // May also be cancelled in callback or somewhere
+                    requestID = setTimeout(loop, ms);
+                }
             }
+            requestID = setTimeout(loop, ms);
         }
-        doWait();
         return () => {
-            if (requestID)
-                cancelAnimationFrame(requestID);
-            startTime = undefined;
+            if (requestID) {
+                if (hasRequestAnimationFrame && typeof requestID === 'number') {
+                    cancelAnimationFrame(requestID);
+                }
+                else {
+                    clearTimeout(requestID);
+                }
+                requestID = undefined;
+            }
         };
     }
     ExtendUtils.waitFor = waitFor;
+    /**
+     * Repeat interval for callback
+     * @param callback Callback
+     * @param miliseconds Miliseconds
+     * @returns cancel callback
+     */
+    function intervalFor(callback, miliseconds) {
+        let requestID;
+        if (hasRequestAnimationFrame) {
+            let lastTime;
+            function loop(timestamp) {
+                // Cancelled
+                if (requestID == null)
+                    return;
+                if (lastTime === undefined) {
+                    lastTime = timestamp;
+                }
+                const elapsed = timestamp - lastTime;
+                if (elapsed >= miliseconds) {
+                    lastTime = timestamp;
+                    callback();
+                }
+                if (requestID != null) {
+                    // May also be cancelled in callback or somewhere
+                    requestID = requestAnimationFrame(loop);
+                }
+            }
+            requestID = requestAnimationFrame(loop);
+        }
+        else {
+            requestID = setInterval(callback, miliseconds);
+        }
+        return () => {
+            if (requestID) {
+                if (hasRequestAnimationFrame && typeof requestID === 'number') {
+                    cancelAnimationFrame(requestID);
+                }
+                else {
+                    clearInterval(requestID);
+                }
+                requestID = undefined;
+            }
+        };
+    }
+    ExtendUtils.intervalFor = intervalFor;
 })(ExtendUtils || (ExtendUtils = {}));

package/lib/mjs/Utils.d.ts

@@ -2,6 +2,23 @@ import { DataTypes, IdType } from './DataTypes';
 import { ParsedPath } from './types/ParsedPath';
 declare global {
     interface String {
+        /**
+         * Add parameter to URL
+         * @param this URL to add parameter
+         * @param name Parameter name
+         * @param value Parameter value
+         * @param arrayFormat Array format to array style or not to multiple fields
+         * @returns New URL
+         */
+        addUrlParam(this: string, name: string, value: DataTypes.Simple, arrayFormat?: boolean | string): string;
+        /**
+         * Add parameters to URL
+         * @param this URL to add parameters
+         * @param data Parameters
+         * @param arrayFormat Array format to array style or not to multiple fields
+         * @returns New URL
+         */
+        addUrlParams(this: string, data: DataTypes.SimpleObject, arrayFormat?: boolean | string): string;
         /**
          * Check the input string contains Chinese character or not
          * @param this Input
@@ -73,6 +90,23 @@ export declare namespace Utils {
      * @param blankLabel Blank label, default is ---
      */
     function addBlankItem<T extends object>(options: T[], idField?: string | keyof T, labelField?: unknown, blankLabel?: string): T[];
+    /**
+     * Add parameter to URL
+     * @param url URL to add parameter
+     * @param name Parameter name
+     * @param value Parameter value
+     * @param arrayFormat Array format to array style or not to multiple fields
+     * @returns New URL
+     */
+    function addUrlParam(url: string, name: string, value: DataTypes.Simple, arrayFormat?: boolean | string): string;
+    /**
+     * Add parameters to URL
+     * @param url URL to add parameters
+     * @param data Parameters
+     * @param arrayFormat Array format to array style or not to multiple fields
+     * @returns New URL
+     */
+    function addUrlParams(url: string, data: DataTypes.SimpleObject, arrayFormat?: boolean | string): string;
     /**
      * Base64 chars to number
      * @param base64Chars Base64 chars

package/lib/mjs/Utils.js

@@ -1,6 +1,12 @@
 import { DataTypes } from './DataTypes';
 import isEqual from 'lodash.isequal';
 import { DateUtils } from './DateUtils';
+String.prototype.addUrlParam = function (name, value, arrayFormat) {
+    return Utils.addUrlParam(this, name, value, arrayFormat);
+};
+String.prototype.addUrlParams = function (data, arrayFormat) {
+    return Utils.addUrlParams(this, data, arrayFormat);
+};
 String.prototype.containChinese = function () {
     const regExp = /[\u3040-\u30ff\u3400-\u4dbf\u4e00-\u9fff\uf900-\ufaff\uff66-\uff9f]/g;
     return regExp.test(this);
@@ -83,6 +89,83 @@ export var Utils;
         return options;
     }
     Utils.addBlankItem = addBlankItem;
+    /**
+     * Add parameter to URL
+     * @param url URL to add parameter
+     * @param name Parameter name
+     * @param value Parameter value
+     * @param arrayFormat Array format to array style or not to multiple fields
+     * @returns New URL
+     */
+    function addUrlParam(url, name, value, arrayFormat) {
+        return addUrlParams(url, { [name]: value }, arrayFormat);
+    }
+    Utils.addUrlParam = addUrlParam;
+    /**
+     * Add parameters to URL
+     * @param url URL to add parameters
+     * @param data Parameters
+     * @param arrayFormat Array format to array style or not to multiple fields
+     * @returns New URL
+     */
+    function addUrlParams(url, data, arrayFormat) {
+        if (typeof URL === 'undefined') {
+            if (url.includes('?')) {
+                url += '&';
+            }
+            else {
+                if (!url.endsWith('/'))
+                    url = url + '/';
+                url += '?';
+            }
+            url += Object.entries(data)
+                .map(([key, value]) => {
+                let v;
+                if (Array.isArray(value)) {
+                    if (arrayFormat == null || arrayFormat === false) {
+                        return value
+                            .map((item) => `${key}=${encodeURIComponent(`${item}`)}`)
+                            .join('&');
+                    }
+                    else {
+                        v = value.join(arrayFormat ? ',' : arrayFormat);
+                    }
+                }
+                else if (value instanceof Date) {
+                    v = value.toJSON();
+                }
+                else {
+                    v = value == null ? '' : `${value}`;
+                }
+                return `${key}=${encodeURIComponent(v)}`;
+            })
+                .join('&');
+            return url;
+        }
+        else {
+            const urlObj = new URL(url);
+            Object.entries(data).forEach(([key, value]) => {
+                if (Array.isArray(value)) {
+                    if (arrayFormat == null || arrayFormat === false) {
+                        value.forEach((item) => {
+                            urlObj.searchParams.append(key, `${item}`);
+                        });
+                    }
+                    else {
+                        urlObj.searchParams.append(key, value.join(arrayFormat ? ',' : arrayFormat));
+                    }
+                }
+                else if (value instanceof Date) {
+                    urlObj.searchParams.append(key, value.toJSON());
+                }
+                else {
+                    urlObj.searchParams.append(key, `${value == null ? '' : value}`);
+                }
+            });
+            return urlObj.toString();
+        }
+    }
+    Utils.addUrlParams = addUrlParams;
     /**
      * Base64 chars to number
      * @param base64Chars Base64 chars

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/shared",
-    "version": "1.2.45",
+    "version": "1.2.47",
     "description": "TypeScript shared utilities and functions",
     "main": "lib/cjs/index.js",
     "module": "lib/mjs/index.js",
@@ -59,7 +59,7 @@
         "jest": "^29.7.0",
         "jest-environment-jsdom": "^29.7.0",
         "ts-jest": "^29.2.5",
-        "typescript": "^5.6.2"
+        "typescript": "^5.6.3"
     },
     "dependencies": {
         "lodash.isequal": "^4.5.0"

package/src/ExtendUtils.ts

@@ -1,5 +1,7 @@
 import { DelayedExecutorType } from './types/DelayedExecutorType';
 
+const hasRequestAnimationFrame = typeof requestAnimationFrame === 'function';
+
 /**
  * Extend utilities
  */
@@ -89,44 +91,119 @@ export namespace ExtendUtils {
      * Wait for condition meets and execute callback
      * requestAnimationFrame to replace setTimeout
      * @param callback Callback
-     * @param checkReady Check ready, when it's a number, similar to setTimeout
+     * @param checkReady Check ready, when it's a number as miliseconds, similar to setTimeout
      * @returns cancel callback
      */
     export function waitFor(
         callback: () => void,
         checkReady: ((spanTime: number) => boolean) | number
     ) {
-        let startTime: number | undefined;
-        let requestID: number | undefined;
-        function doWait(time?: number) {
-            // Reset request id
-            requestID = undefined;
-
-            // First time
-            if (startTime == null) startTime = time;
-
-            // Ignore
-            if (startTime === 0) return;
-
-            const spanTime =
-                startTime == null || time == null ? 0 : time - startTime;
-            if (
-                time != null &&
-                (typeof checkReady === 'number'
-                    ? spanTime >= checkReady
-                    : checkReady(spanTime))
-            ) {
-                callback();
-            } else {
-                requestID = requestAnimationFrame(doWait);
+        let requestID: number | undefined | NodeJS.Timeout;
+
+        if (hasRequestAnimationFrame) {
+            let lastTime: number | undefined;
+            function loop(timestamp: number) {
+                // Cancelled
+                if (requestID == null) return;
+
+                if (lastTime === undefined) {
+                    lastTime = timestamp;
+                }
+
+                const elapsed = timestamp - lastTime;
+
+                const isReady =
+                    typeof checkReady === 'number'
+                        ? elapsed >= checkReady
+                        : checkReady(elapsed);
+
+                if (isReady) {
+                    callback();
+                } else if (requestID != null) {
+                    // May also be cancelled in callback or somewhere
+                    requestID = requestAnimationFrame(loop);
+                }
             }
+            requestID = requestAnimationFrame(loop);
+        } else if (typeof checkReady === 'number') {
+            requestID = setTimeout(callback, checkReady);
+        } else {
+            // Bad practice to use setTimeout in this way, only for compatibility
+            const ms = 20;
+            let spanTime = 0;
+            let cr = checkReady;
+            function loop() {
+                // Cancelled
+                if (requestID == null) return;
+
+                spanTime += ms;
+
+                if (cr(spanTime)) {
+                    callback();
+                } else if (requestID != null) {
+                    // May also be cancelled in callback or somewhere
+                    requestID = setTimeout(loop, ms);
+                }
+            }
+            requestID = setTimeout(loop, ms);
         }
 
-        doWait();
+        return () => {
+            if (requestID) {
+                if (hasRequestAnimationFrame && typeof requestID === 'number') {
+                    cancelAnimationFrame(requestID);
+                } else {
+                    clearTimeout(requestID);
+                }
+                requestID = undefined;
+            }
+        };
+    }
+
+    /**
+     * Repeat interval for callback
+     * @param callback Callback
+     * @param miliseconds Miliseconds
+     * @returns cancel callback
+     */
+    export function intervalFor(callback: () => void, miliseconds: number) {
+        let requestID: number | undefined | NodeJS.Timer;
+
+        if (hasRequestAnimationFrame) {
+            let lastTime: number | undefined;
+            function loop(timestamp: number) {
+                // Cancelled
+                if (requestID == null) return;
+
+                if (lastTime === undefined) {
+                    lastTime = timestamp;
+                }
+
+                const elapsed = timestamp - lastTime;
+                if (elapsed >= miliseconds) {
+                    lastTime = timestamp;
+                    callback();
+                }
+
+                if (requestID != null) {
+                    // May also be cancelled in callback or somewhere
+                    requestID = requestAnimationFrame(loop);
+                }
+            }
+            requestID = requestAnimationFrame(loop);
+        } else {
+            requestID = setInterval(callback, miliseconds);
+        }
 
         return () => {
-            if (requestID) cancelAnimationFrame(requestID);
-            startTime = undefined;
+            if (requestID) {
+                if (hasRequestAnimationFrame && typeof requestID === 'number') {
+                    cancelAnimationFrame(requestID);
+                } else {
+                    clearInterval(requestID);
+                }
+                requestID = undefined;
+            }
         };
     }
 }

package/src/Utils.ts

@@ -5,6 +5,34 @@ import { ParsedPath } from './types/ParsedPath';
 
 declare global {
     interface String {
+        /**
+         * Add parameter to URL
+         * @param this URL to add parameter
+         * @param name Parameter name
+         * @param value Parameter value
+         * @param arrayFormat Array format to array style or not to multiple fields
+         * @returns New URL
+         */
+        addUrlParam(
+            this: string,
+            name: string,
+            value: DataTypes.Simple,
+            arrayFormat?: boolean | string
+        ): string;
+
+        /**
+         * Add parameters to URL
+         * @param this URL to add parameters
+         * @param data Parameters
+         * @param arrayFormat Array format to array style or not to multiple fields
+         * @returns New URL
+         */
+        addUrlParams(
+            this: string,
+            data: DataTypes.SimpleObject,
+            arrayFormat?: boolean | string
+        ): string;
+
         /**
          * Check the input string contains Chinese character or not
          * @param this Input
@@ -74,6 +102,23 @@ declare global {
     }
 }
 
+String.prototype.addUrlParam = function (
+    this: string,
+    name: string,
+    value: DataTypes.Simple,
+    arrayFormat?: boolean | string
+) {
+    return Utils.addUrlParam(this, name, value, arrayFormat);
+};
+
+String.prototype.addUrlParams = function (
+    this: string,
+    data: DataTypes.SimpleObject,
+    arrayFormat?: boolean | string
+) {
+    return Utils.addUrlParams(this, data, arrayFormat);
+};
+
 String.prototype.containChinese = function (this: string): boolean {
     const regExp =
         /[\u3040-\u30ff\u3400-\u4dbf\u4e00-\u9fff\uf900-\ufaff\uff66-\uff9f]/g;
@@ -180,6 +225,97 @@ export namespace Utils {
         return options;
     }
 
+    /**
+     * Add parameter to URL
+     * @param url URL to add parameter
+     * @param name Parameter name
+     * @param value Parameter value
+     * @param arrayFormat Array format to array style or not to multiple fields
+     * @returns New URL
+     */
+    export function addUrlParam(
+        url: string,
+        name: string,
+        value: DataTypes.Simple,
+        arrayFormat?: boolean | string
+    ) {
+        return addUrlParams(url, { [name]: value }, arrayFormat);
+    }
+
+    /**
+     * Add parameters to URL
+     * @param url URL to add parameters
+     * @param data Parameters
+     * @param arrayFormat Array format to array style or not to multiple fields
+     * @returns New URL
+     */
+    export function addUrlParams(
+        url: string,
+        data: DataTypes.SimpleObject,
+        arrayFormat?: boolean | string
+    ) {
+        if (typeof URL === 'undefined') {
+            if (url.includes('?')) {
+                url += '&';
+            } else {
+                if (!url.endsWith('/')) url = url + '/';
+                url += '?';
+            }
+
+            url += Object.entries(data)
+                .map(([key, value]) => {
+                    let v: string;
+                    if (Array.isArray(value)) {
+                        if (arrayFormat == null || arrayFormat === false) {
+                            return value
+                                .map(
+                                    (item) =>
+                                        `${key}=${encodeURIComponent(
+                                            `${item}`
+                                        )}`
+                                )
+                                .join('&');
+                        } else {
+                            v = value.join(arrayFormat ? ',' : arrayFormat);
+                        }
+                    } else if (value instanceof Date) {
+                        v = value.toJSON();
+                    } else {
+                        v = value == null ? '' : `${value}`;
+                    }
+
+                    return `${key}=${encodeURIComponent(v)}`;
+                })
+                .join('&');
+
+            return url;
+        } else {
+            const urlObj = new URL(url);
+            Object.entries(data).forEach(([key, value]) => {
+                if (Array.isArray(value)) {
+                    if (arrayFormat == null || arrayFormat === false) {
+                        value.forEach((item) => {
+                            urlObj.searchParams.append(key, `${item}`);
+                        });
+                    } else {
+                        urlObj.searchParams.append(
+                            key,
+                            value.join(arrayFormat ? ',' : arrayFormat)
+                        );
+                    }
+                } else if (value instanceof Date) {
+                    urlObj.searchParams.append(key, value.toJSON());
+                } else {
+                    urlObj.searchParams.append(
+                        key,
+                        `${value == null ? '' : value}`
+                    );
+                }
+            });
+            return urlObj.toString();
+        }
+    }
+
     /**
      * Base64 chars to number
      * @param base64Chars Base64 chars