常用工具函数

96 阅读2分钟

防抖函数

function debounce(callback, time = 300) {
	var timer;
	return function () {
		var args = arguments;
		clearTimeout(timer);
		timer = setTimeout(() => {
			callback.apply(this, args);
		}, time);
	};
}

节流函数

function throttle(callback, time = 300) {
	let flag = true;
	return function () {
		var args = arguments;
		if (!flag) return;
		flag = false;
		callback.apply(this, args);
		setTimeout(() => {
			flag = true;
		}, time);
	};
}

深拷贝(对象&数组)

function deepClone(obj) {
    if (obj == null) return obj;
    if (Array.isArray(obj)) {
            return obj.map(deepClone);
    }
    if (typeof obj === "object") {
            let o = {};
            for (let k in obj) {
                    o[k] = deepClone(obj[k]);
            }
            return o;
    }
    return obj;
}

Base64转Blob

function dataURLtoBlob(dataurl) {
    var arr = dataurl.split(",");
    var mime = arr[0].match(/:(.*?);/)[1];
    var bstr = atob(arr[1]);
    var n = bstr.length;
    var u8arr = new Uint8Array(n);
    while (n--) u8arr[n] = bstr.charCodeAt(n);
    return new Blob([u8arr], {type: mime});
}

读取文件

function readFile(file, encoding) {
    return new Promise(function (resolve, reject) {
            var reader = new FileReader();
            var b64 = encoding == "base64";
            if (b64) encoding = "DataURL";
            if (encoding && reader["readAs" + encoding]) reader["readAs" + encoding](file);
            else reader.readAsText(file, encoding);
            reader.onload = function (e) {
                if (b64) {
                        var idx = e.target.result.indexOf(",");
                        resolve(e.target.result.substr(idx + 1));
                } else resolve(e.target.result);
            };
            reader.onerror = reject;
    });
}

延时函数

function sleep(ms) {
    return new Promise(function (resolve) {
            setTimeout(resolve, ms);
    });
}

执行一次

function once(listener, eventType, options) {
    var fn;
    return new Promise((resolve) => {
            listener.addEventListener(eventType, resolve, options);
            fn = function () {
                    listener.removeEventListener(eventType, resolve);
            };
    }).finally(fn);
}

Ajax封装

function ajax(method, url, data, responseType) {
    return new Promise(function (resolve, reject) {
            var xhr = new XMLHttpRequest();
            xhr.open(method.toUpperCase(), url, true);
            xhr.responseType = responseType;
            xhr.onload = function () {
                if (xhr.status == 200) {
                    resolve(xhr.response);
                } else {
                     reject(xhr);
                }
            };
            xhr.onerror = function () {
                reject(xhr);
            };
            xhr.send(data);
    });
}

倒计时

function countdown(time) {
    time = time || new Date().setHours(24, 0, 0, 0);
    let rest = {hour: 0, minute: 0, second: 0, millisecond: 0};
    function timeout() {
            if (!rest) return;
            let now = time - Date.now();
            if (now < 0) now = 0;
            let hour = Math.floor(now / 1000 / 60 / 60);
            if (hour < 10) hour = "0" + hour;
            let minute = Math.floor((now / 1000 / 60) % 60);
            if (minute < 10) minute = "0" + minute;
            let second = Math.floor((now / 1000) % 60);
            if (second < 10) second = "0" + second;
            let millisecond = now % 1000;
            if (millisecond < 10) millisecond = "00" + millisecond;
            else if (millisecond < 100) millisecond = "0" + millisecond;
            rest.hour = hour;
            rest.minute = minute;
            rest.second = second;
            rest.millisecond = millisecond;
            if (now > 0) requestAnimationFrame(timeout);
            return rest;
    }
    window.addEventListener('beforeunload',() => rest = null)
    return timeout();
}

图片翻转(左右、上下)

function flipImage(img,direction) {
    var canvas = document.createElement("canvas");
    var ctx = canvas.getContext("2d");
    canvas.width = img.naturalWidth || img.width;
    canvas.height = img.naturalHeight || img.height;
    if(direction == 'x'){
      ctx.transform(-1, 0, 0, 1, canvas.width, 0); 
    }
    if(direction == 'y'){
      ctx.transform(1, 0, 0, -1, 0, canvas.height);
    }
    ctx.drawImage(img, 0, 0);
    return canvas;
}