JavaScript

js防抖和节流

2019-06-05  本文已影响0人  呵呵_4350

防抖:函数一定时间内只执行最后一次,比如一个公交司机,等到最后一个乘客上车时才关门,只需要关一次

节流:函数每一段固定时间内执行一次,比如地铁闸门,每五秒关一次,固定五秒

防抖的实现思路:每次触发事件时都取消之前的延时调用方法:

 let handle;

function  debounce(fn, delay) {

  return  function(e) {

        // 取消之前的延时调用

        clearTimeout(handle);

        handle = setTimeout(() => {

            fn(e);

        }, delay);

    }

}

节流的实现思路:每次触发事件时都判断当前是否有等待执行的延时函数

function throttle(fn, delay) {

    let runFlag = false;

    return function(e) {

        // 判断之前的调用是否完成

        if (runFlag) {

            return false;

        }

        runFlag = true;

        setTimeout(() => {

            fn(e);

            runFlag = false;

        }, delay)

    }

}

上一篇下一篇

猜你喜欢

热点阅读