您好,欢迎访问代理记账网站
移动应用 微信公众号 联系我们

咨询热线 -

电话 15988168888

联系客服
  • 价格透明
  • 信息保密
  • 进度掌控
  • 售后无忧

JavaScript 防抖节流

节流:

        函数的节流就是预定一个函数只有在大于等于执行周期时才会执行,周期内调用不会执行。好像一滴水只有积攒到一定重量才会落下一样。

     我们想要的是在规定时间内只能执行一次,比如1秒内只能执行一次.无论你点击多少次

<button id='show'>抢购</button>
 
<div id="box">0</div>

// 点击调用节流函数
show.onclick = throttle(qianggou, 1000)
//节流函数 wait:规定在一秒钟内只能执行一次
function throttle (callback, wait) {
        //定义时间为0
        let lastTime = 0;
        //返回函数 否则调用将是undefined
        return function () {
            //定义当前时间
            let nowTime = new Date().getTime()
            //判断当前时间减去0是否大于 自定义时间
            if (nowTime - lastTime > wait) {
                /调用函数
                callback();   //也可调用时改变this指向
                //保存上次点击的时间
                lastTime = nowTime;
            }
        }
    }
    //数量加一
    function qianggou(){
        box.innerText = parseInt(box.innerText)+1
    }


防抖:

                函数防抖就是函数需要频繁触发情况时,只有足够空闲的时候,才会执行一次。好像公交司机会等人都上车后才会开车一样

        在搜索的时候,并不是每输入一个字符,都会想服务器请求一次,而是在输入完成后发出一次请求。

        用户无论输入多快,都会发出请求,从而去加载服务器资源,对性能有很大的影响.

<input type="text" id="ipt" />
function debounce (callback, wait) { //callback :函数 wait : 时间
        //定时器名称
        let timer = null;
        //跟节流同理 返回函数 否则调用将是undefined
        return function () {
            //获取input的this
            let that= this
            //调用时清除
            clearTimeout(timer);
            //开启定时器
            timer = setTimeout(function () {
               //调用传入函数
                callback.call(that);  //this绑定
            },wait)
        }
    }
    //当前input值
    function ajax () {
        console.log(this.value)
    }
    //输入时触发
    ipt.oninput = debounce(ajax, 1000)  //1s后发出请求


call()、apply()、bind() 都是用来重定义 this 这个对象的! bind 返回的是一个新的函数,你必须调用它才会被执行。

bind 有返回值 并且返回值是一个函数

call apply 没有返回

call 有多个参数 第一个参数 this的指向 后面的参数就是要传递的参数

applu 有两个参数 第一个参数 this的指向  后参数的数组

bind 的参数个call一样

obj.myFun.call(db,'成都','上海');     // 德玛 年龄 99  来自 成都去往上海
obj.myFun.apply(db,['成都','上海']);      // 德玛 年龄 99  来自 成都去往上海  
obj.myFun.bind(db,'成都','上海')();       // 德玛 年龄 99  来自 成都去往上海
obj.myFun.bind(db,['成都','上海'])();   // 德玛 年龄 99  来自 成都, 上海去往 undefined


微妙的差距!

从上面四个结果不难看出:

call 、bind 、 apply 这三个函数的第一个参数都是 this 的指向对象,第二个参数差别就来了:

call 的参数是直接放进去的,第二第三第 n 个参数全都用逗号分隔,直接放到后面 obj.myFun.call(db,'成都', ... ,'string' )。

apply 的所有参数都必须放在一个数组里面传进去 obj.myFun.apply(db,['成都', ..., 'string' ])。

bind 除了返回是函数以外,它 的参数和 call 一样。

当然,三者的参数不限定是 string 类型,允许是各种类型,包括函数 、 object 等等!

函数节流与函数防抖

throttle-函数节流:一个水龙头在滴水,可能一次性会滴很多滴,但我们只希望它每隔500ms滴一滴水,保持这个频率,即我们希望函数在以一个可以接受的频率重复操作

debounce-函数防抖:将一个弹簧按下,继续加压,继续按下,只会在最后放手的一瞬反弹。即我们希望函数只会调用一次,即使在这之前反复调用它,最终也只是会调用一次而已


分享:

低价透明

统一报价,无隐形消费

金牌服务

一对一专属顾问7*24小时金牌服务

信息保密

个人信息安全有保障

售后无忧

服务出问题客服经理全程跟进