js 常用工具函数 节流函数 防抖函数 等

js获取url参数

  function getQueryVariable(variable) {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i = 0; i < vars.length; i++) {
            var pair = vars[i].split("=");
            if (pair[0] == variable) {
                return pair[1];
            }
        }
        return (false);
    }

// 改善版本
function getVariable(url, key) {
    url = new URL(url);
    return url.searchParams.get(key)
}

截取字符串url中的参数

function getQueryVariable(url, variable) {
			let index = url.indexOf("?") + 1
			let str = url.substring(index)
			var vars = str.split("&");
			for (var i = 0; i < vars.length; i++) {
				var pair = vars[i].split("=");
				if (pair[0] == variable) {
					return pair[1];
				}
			}
			return (false);
		}

删除url中特定参数重新生成url

function createURl(url, variable) {
    let index = url.indexOf("?") + 1
    let str = url.substring(index)
    let newUrl = url.substring(0, index)
    var vars = str.split("&");
    for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split("=");
        if (pair[0] != variable) {
            if (/\=/.test(newUrl)) {
                newUrl = newUrl + `&${vars[i]}`
            } else {
                newUrl += vars[i]
            }
        }
    }
    return newUrl
}

节流函数(绑定this)

export function throttle(callBack, time = 1000) {
	let timer;
	return function() {
		if (timer) return
		timer = setTimeout(() => {
			timer = null;
			callBack.apply(this)
		}, time)
	}
}

防抖函数(绑定this)

export function debounce(callBack, time = 1000) {
	let timer;
	return function() {
		if (timer) clearTimeout(timer)
		timer = setTimeout(() => {
			callBack.apply(this)
		}, time)
	}
}

防抖函数(绑定this,立即执行)

function debounce(func, wait, immediate) {

      var timeout, result;

      return function () {
        var context = this;
        var args = arguments;

        if (timeout) clearTimeout(timeout);
        if (immediate) {
          // 如果已经执行过，不再执行
          var callNow = !timeout;
          if (callNow) result = func.apply(context, args)
          timeout = setTimeout(function () {
            timeout = null;
          }, wait)
        }
        else {
          timeout = setTimeout(function () {
            func.apply(context, args)
          }, wait);
        }
        return result;
      }
    }

sass求百分比公式

// 百分比函数
@function percent($params, $params2) {
  @return ($params / $params2)*100%
}

// vw函数
@function vw($size) {
  @return ($size / $baseSize * 100)+vw
}

ios 上面禁止页面缩放

解释 为提升性能 很多浏览器将passive设置为true,这就导致preventDefault()无效
详细解释

window.onload = () => {
  document.addEventListener('touchstart', (event) => {
    if (event.touches.length > 1) {
       event.preventDefault();
    }
  }, { passive: false });
  
  let lastTouchEnd = 0;
  document.addEventListener('touchend', (event) => {
    const now = (new Date()).getTime();
    if (now - lastTouchEnd <= 300) {
      event.preventDefault();
    }
    lastTouchEnd = now;
  }, false);
}

微信h5网页关闭分享以及关闭当前页面

关闭网页分享一些按钮(开发者上可能会报错,请忽略,在手机上查看功能)

document.addEventListener("WeixinJSBridgeReady", function () {
    WeixinJSBridge.call('hideOptionMenu');
});

关闭网页

 WeixinJSBridge.call('closeWindow');

数字转汉字

//将数字（整数）转为汉字，从零到一亿亿，需要小数的可自行截取小数点后面的数字直接替换对应arr1的读法就行了
function convertToChinaNum(num) {
    var arr1 = new Array('零', '一', '二', '三', '四', '五', '六', '七', '八', '九');
    var arr2 = new Array('', '十', '百', '千', '万', '十', '百', '千', '亿', '十', '百', '千','万', '十', '百', '千','亿');//可继续追加更高位转换值
    if(!num || isNaN(num)){
        return "零";
    }
    var english = num.toString().split("")
    var result = "";
    for (var i = 0; i < english.length; i++) {
        var des_i = english.length - 1 - i;//倒序排列设值
        result = arr2[i] + result;
        var arr1_index = english[des_i];
        result = arr1[arr1_index] + result;
    }
    //将【零千、零百】换成【零】 【十零】换成【十】
    result = result.replace(/零(千|百|十)/g, '零').replace(/十零/g, '十');
    //合并中间多个零为一个零
    result = result.replace(/零+/g, '零');
    //将【零亿】换成【亿】【零万】换成【万】
    result = result.replace(/零亿/g, '亿').replace(/零万/g, '万');
    //将【亿万】换成【亿】
    result = result.replace(/亿万/g, '亿');
    //移除末尾的零
    result = result.replace(/零+$/, '')
    //将【零一十】换成【零十】
    //result = result.replace(/零一十/g, '零十');//貌似正规读法是零一十
    //将【一十】换成【十】
    result = result.replace(/^一十/g, '十');
    return result;
}

表格连续下标

/**
 * @description: 生成表格下标
 * @param {number} index
 * @param {number} page
 * @param {number} size
 * @return {*}
 */
export const generateIndex = (index: number, page: number, size: number) => (page - 1) * size + index + 1