节流、防抖

1、节流

多次调用方法，按照一定的时间间隔执行

这个方法的实现也是从Lodash库中copy的

/**

* 节流，多次触发，间隔时间段执行

* @param {Function} func

* @param {Int} wait

* @param {Object} options

*/

export function throttle(func, wait=500, options) {

    //container.onmousemove = throttle(getUserAction, 1000);

    var timeout, context, args

    var previous = 0

    if (!options) options = {leading:false,trailing:true}

    var later = function() {

        previous = options.leading === false ? 0 : new Date().getTime()

        timeout = null

        func.apply(context, args)

        if (!timeout) context = args = null

    }

    var throttled = function() {

        var now = new Date().getTime()

        if (!previous && options.leading === false) previous = now

        var remaining = wait - (now - previous)

        context = this

        args = arguments

        if (remaining <= 0 || remaining > wait) {

            if (timeout) {

                clearTimeout(timeout)

                timeout = null

            }

            previous = now

            func.apply(context, args)

            if (!timeout) context = args = null

        } else if (!timeout && options.trailing !== false) {

            timeout = setTimeout(later, remaining)

        }

    }

    return throttled

}

第三个参数还有点复杂，options

leading，函数在每个等待时延的开始被调用，默认值为false

trailing，函数在每个等待时延的结束被调用，默认值是true

可以根据不同的值来设置不同的效果：

leading-false，trailing-true：默认情况，即在延时结束后才会调用函数

leading-true，trailing-true：在延时开始时就调用，延时结束后也会调用

leading-true, trailing-false：只在延时开始时调用

例子：

       

            function onInput() {

                console.log('123456789')

            }

            const throttleOnInput = throttle(onInput)

            document

                .getElementById('input')

                .addEventListener('input', throttleOnInput)

//在Input中输入，每隔500ms执行一次代码

2、防抖

在一定时间间隔内，多次调用一个方法，只会执行一次.

这个方法的实现是从Lodash库中copy的

/**

*

* @param {*} func 要进行debouce的函数

* @param {*} wait 等待时间,默认500ms

* @param {*} immediate 是否立即执行

*/

export function debounce(func, wait=500, immediate=false) {

    var timeout

    return function() {

        var context = this

        var args = arguments

        if (timeout) clearTimeout(timeout)

        if (immediate) {

            // 如果已经执行过，不再执行

            var callNow = !timeout

            timeout = setTimeout(function() {

                timeout = null

            }, wait)

            if (callNow) func.apply(context, args)

        } else {

            timeout = setTimeout(function() {

                func.apply(context, args)

            }, wait)

        }

    }

}

例子：

       

            function onInput() {

                console.log('1111')

            }

            const debounceOnInput = debounce(onInput)

            document

                .getElementById('input')

                .addEventListener('input', debounceOnInput) //在Input中输入，多次调用只会在调用结束之后，等待500ms触发一次 

自己手写的版本：

/**

* @desc 函数防抖

* @param func 函数

* @param wait 延迟执行毫秒数

* @param immediate true 表立即执行，false 表非立即执行

*/

function debounce(fun,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) fun.apply(context,args)

}else{

timeout = setTimeout(() => {

         fun.apply(context,args)

  }, wait)

}

}

}

持续收录。。。。。。