记一次项目中使用防抖(debounce)函数

107 阅读1分钟

所谓防抖,就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间。

防抖函数分可以有两钟方式,立即执行的防抖函数和延迟执行的防抖函数。

立即执行的防抖函数,俗称阉割版的防抖函数。

function debounce(fn, waitTime) {
    let timeout;
    return function () {
        let context = this;
        let args = arguments;
        if (timeout) clearTimeout(timeout);
        timeout = setTimeout(() => {
            fn.apply(context, args)
        }, waitTime);
    }
}

延迟执行的防抖函数,俗称正版的防抖函数。

function debounce(func,wait,immediate) {
    let timeout;
    return function () {
        let context = this;
        let args = arguments;
        if (timeout) clearTimeout(timeout);
        if (immediate) {
            var callNow = !timeout;
            timeout = setTimeout(() => {
                timeout = null;
            }, wait)
            if (callNow) func.apply(context, args)
        }
        else {
            timeout = setTimeout(function(){
                func.apply(context, args)
            }, wait);
        }
    }
}

小知识点积累,获取页面中所有使用的标签。然后输出的形式,是以一个数组的形式。

此种方式获取到的是一个对象,要是转换成数组的话使用  Array.from()转换
获取也面中所有元素的方式
    1. document.all  
    2. document.getElementByTagName('*')
    3. document.querySelectAll('*')
 new Set([...document.querySelectAll('*')].map(v => v.tagName))
 new Set([...document.all].map(v => v.tagName)