js函数的防抖和节流

一、防抖

        多次请求数据不相同，而只需要执行最后一次

        解决方法==>延时器：

        第一次触发点击事件，先执行clearInterval( time )，此时的time为0，没有需要清除的定时器/延时器。再执行setTimeout时设定了延时器，time存储值为1。

        在延时器设定的时间内快速点击第二次触发点击事件，同样地先执行clearInterval( time )，此时的time为1，清除上一次的延时器，console.log不执行；

        以此类推，直到最后一次触发点击事件时，前面的延时器都被清除了，而最后一次生成的延时器没有被清除，console.log执行。

        

        let time = 0 ;

        $('button').click( function(){

            clearInterval( time );

            // 点击 触发一个 延时器 1秒以后 执行 程序

            time = setTimeout(() => {              

                console.log(111);

            }, 1000);

            console.log(time);

        } )

        

二、节流

         多次请求数据相同，而只需要第一次执行

        解决方法==>设置开关

        定义变量bool并设定原始值为true,页面滚动监听事件第一次执行的时候，bool值为true，先将bool值改为false,ajax请求发送没完成，不会发送下一次的ajax,ajax请求执行完成，bool值改为true,才能继续发送请求。

// 定义 变量 存储默认值

        let bool = true;

        $(window).scroll(function(){

            // 先判断变量储存的数值

            if( bool === true ){

                bool = false ;

            }else{

                return ;

            }

            // 每次滚动 都会多次触发 请求

            $.ajax({

                url:'http://localhost:8888/test/first',

                type:'get',

                success:function(res){

                    console.log(res);

                    // 变量赋值原始值

                    bool = true ;

                }

            })

        })