程序优化之防抖与节流

1.防抖: 当在程序中高频率的触发某个事件,只让事件执行最后一次

2.节流: 当高频率触发某个事件的时候,让代码执行第一次,第一次执行完成后再执行一次

1.防抖的实现方式:

(1)防抖实现:核心要将实现的功能推迟执行  ----延迟函数

html代码:

<input type="button" value="按钮">

    <script src="./lodash.min.js"></script>

//代码演示:

        let timeID;

        btn.addEventListener('click', function () {

            clearTimeout(timeID)

            timeID = setTimeout(function () {

                console.log('今天放假吗?');

            }, 1000)

        });

        (2)防抖实现也可以用插件:(Lodash插件)

插件网址:Lodash 简介 | Lodash 中文文档 | Lodash 中文网

        btn.addEventListener('click', _.debounce(calculateLayout, 1000));

        function calculateLayout() {

            console.log('今天放假吗?');

        }

demo:submit: _.debounce(function() {
        this.$refs.uForm.validate().then(res => {
          let data = { };
          elecSave(data).then((res) => {})
        }).catch(errors => {
          uni.$u.toast(errors[0].message);
        });
      }, 500),

2.节流实现方式

(1)原生js实现节流方式

html代码:

 <div class="box">

        <ul>

            <li>1</li>

            <li>2</li>

            <li>3</li>

            <li>4</li>

        </ul>

    </div>

    <input type="button" value="向左">

    <script src="./lodash.min.js"></script>

js代码:

      let btn = document.querySelector('input');

        let ul = document.querySelector('ul');

        let i = 0;

// 1) 先将事件中要处理的代码单独提取出一个函数

        function myclick() {

            i++;

            ul.style.transform = `translateX(${-300 * i}px)`;

            ul.style.transition = 'all 2s'; 

        }

        // 2) 对事件中函数进行节流操作

        // a) 第一个参数: 要对哪个函数进行节流, fn 形参就是要被进行节流处理的函数

        // b) 第二个参数: 要设置每次动作的时间间隔

        function jieliu(fn, time) {

            // 定义一个变量保存当前开始的时间

            let startTime = 0;

            return function () {

                // 定义一个变量保存当前代码执行的时间

                let nowtime = +new Date();

                if (nowtime - startTime >= 2000) {

                    // 调用fn即可

                    fn();

                    startTime = nowtime;

                }

            };

        }

        btn.addEventListener('click', jieliu(myclick, 2000));

(2)使用插件完成节流操作:

       btn.addEventListener('click', _.throttle(myclick, 2000));