zoukankan      html  css  js  c++  java
  • lodash一些好用的函数

    1._debounce和_.throttle 防抖和节流

    throttle Demo走起(Vue写法)

    testThrottle: _.throttle(function() {
      console.log("throttle");
    }, 5000, {
      leading: true,
      trailing: false
    })

    testThrottle方法被绑定在一个按钮上,demo最终的效果是 :

    1、按钮点击后控制台立马打印了throttle——19:39:00;

    2、5秒内点击多次按钮,最终只打印一次throttle——19:39:05前;

    3、5秒后再点击一次,会重新打印throttle——19:39:05后;

    PS:lodash默认trailing为true,那么最终的效果是在点击时会立即打印throttle,且5秒后又会再打印一次,即节流之前和之后都会执行该节流函数。

    throttle 总结走起

    预先设定一个执行周期,当调用动作的时刻大于等于执行周期则执行该动作,然后进入下一个新的时间周期。

    简言之:结束时间点不会随点击改变

    debounce Demo走起

    testDebounce: _.debounce(function() {
      console.log("debounce");
    }, 2000, {
      leading: true,
      trailing: false
    })

    testDebounce方法被绑定在一个按钮上,demo最终的效果是 :

    1、按钮点击后控制台立马打印了debounce——19:39:00;

    2、5秒内点击多次按钮,最终只打印一次debounce——19:39:05前,假设19:39:04完成了最后一次点击;

    3、相对于最后一次点击的5秒后再点击一次,会重新打印debounce——19:39:09后;

    PS:lodash默认leading为false、trailing为true,那么最终的效果是在点击后等待5秒才会打印debounce,即延迟之前不执行函数,而是在延迟之后执行。

    debounce 总结走起

    当调用动作触发一段时间后,才会执行该动作,若在这段时间间隔内又调用此动作则将重新计算时间间隔。

    简言之:结束时间点会随点击改变

    综上所述,适用情况如下:

    throttle

    (1)对于键盘事件,当用户键入非常频繁,但我们又必须要在一定时间(阀值)内执行处理函数的时候。例如:一些网页游戏的键盘事件。

    (2)对于鼠标移动和窗口滚动,鼠标的移动和窗口的滚动会带来大量的事件,但是在一段时间内又必须看到页面的效果。例如:对于可以拖动的div,如果使用debounce,那么div会在拖动停止后突然跳到目标位置;这时就需要使用throttle。

    debounce

    (1)对于键盘事件,当用户输入比较频繁的时候,可以通过debounce合并键盘事件处理。例如:需要在用户输入完成时进行字符串校验。

    (2)对于ajax请求的情况。例如:当页面下拉超过一定范围就通过ajax请求新的页面内容,这时候可以通过debounce合并ajax请求事件。

  • 相关阅读:
    robots协议
    Java Script学习 4(转)
    Java Script学习 3(转)
    HTML 8 总结(转)
    HTML 7 (转)
    HTML 6 (转)
    HTML 5 (转)
    python类方法/实例方法/静态方法
    chromedriver下载地址
    字符编码表
  • 原文地址:https://www.cnblogs.com/xuzhenlei/p/15221214.html
Copyright © 2011-2022 走看看