类型判断、节流、防抖、深度克隆

/**
 * 返回target的类型,eg. typeIs([]) === 'array'
 * @param target
 * @returns {string}
 */
function typeIs(target) {
    return Object.prototype.toString.apply(target).match(/\[object\s(\w+)\]/)[1].toLowerCase();
}

/**
 * 节流原理:在一定时间内,只能触发一次
 *
 * @param {Function} func 要执行的回调函数
 * @param {Number} wait 延时的时间
 * @param {Boolean} immediate 是否立即执行
 * @return null
 */
let throttleTimer; let throttleFlag;
function throttle(func, wait = 500, immediate = true) {
    if (immediate) {
        if (!throttleFlag) {
            throttleFlag = true
            // 如果是立即执行,则在wait毫秒内开始时执行
            typeof func === 'function' && func()
            throttleTimer = setTimeout(() => {
                throttleFlag = false
            }, wait)
        }
    } else if (!throttleFlag) {
        throttleFlag = true
        // 如果是非立即执行,则在wait毫秒内的结束处执行
        throttleTimer = setTimeout(() => {
            throttleFlag = false
            typeof func === 'function' && func()
        }, wait)
    }
}

/**
 * 防抖原理:一定时间内,只有最后一次操作,再过wait毫秒后才执行函数
 *
 * @param {Function} func 要执行的回调函数
 * @param {Number} wait 延时的时间
 * @param {Boolean} immediate 是否立即执行
 * @return null
 */
let debounceTimeout = null;
function debounce(func, wait = 500, immediate = false) {
    // 清除定时器
    if (debounceTimeout !== null) clearTimeout(debounceTimeout)
    // 立即执行,此类情况一般用不到
    if (immediate) {
        const callNow = !debounceTimeout
        debounceTimeout = setTimeout(() => {
            debounceTimeout = null
        }, wait)
        if (callNow) typeof func === 'function' && func()
    } else {
        // 设置定时器,当最后一次操作后,debounceTimeout不会再被清除,所以在延时wait毫秒后执行func回调方法
        debounceTimeout = setTimeout(() => {
            typeof func === 'function' && func()
        }, wait)
    }
}

/**
 * @description 深度克隆
 * @param {object} obj 需要深度克隆的对象
 * @returns {*} 克隆后的对象或者原值(不是对象)
 */
function deepClone(obj) {
    function array(value) {
        if (typeof Array.isArray === 'function') {
            return Array.isArray(value)
        }
        return Object.prototype.toString.call(value) === '[object Array]'
    }
	// 对常见的“非”值,直接返回原来值
	if ([null, undefined, NaN, false].includes(obj)) return obj
	if (typeof obj !== 'object' && typeof obj !== 'function') {
		// 原始类型直接返回
		return obj
	}
	const o = array(obj) ? [] : {}
	for (const i in obj) {
		if (obj.hasOwnProperty(i)) {
			o[i] = typeof obj[i] === 'object' ? deepClone(obj[i]) : obj[i]
		}
	}
	return o
}
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
在实际应用中,防抖节流常用于对resize事件做处理。防抖函数可以确保在resize事件触发时只执行一次操作,避免频繁重绘或请求接口。而节流函数则可以控制resize事件的触发频率,例如每隔一定时间执行一次操作。 <span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [防抖节流](https://blog.csdn.net/weixin_49334139/article/details/125404842)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [resize函数防抖节流写法](https://blog.csdn.net/dreamjay1997/article/details/91862686)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [js节流防抖应用场景,以及在vue中节流防抖的具体实现操作](https://blog.csdn.net/yetaodiao/article/details/127371795)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

DevilAngelia

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值