zoukankan      html  css  js  c++  java
  • js 防抖与节流原理

    防抖和节流是前端应用开发中常见的两个功能,其原理都是利用闭包,缓存延迟时间。常用于窗口的resize、scroll,输入框内容校验等操作。

    (1)防抖,思路:在规定时间内未触发第二次,则执行,代码如下

    function debounce(fn, delay) {

      let time = null ; //定时器

      delay = delay || 500

      //利用闭包,缓存delay

      return function() {

        let arg = arguments

        if(time) {

          clearTimerOut(time)

        }

            time = setTimerOut(()=>{

          fn.apply(this,arg)

        },delay)

      }

    }

    (2)节流,当持续触发事件时,保证一定时间段内只调用一次

      function throttle(fn,delay) {

        let pre = Date.now()

        deley = delay || 500;

        return function(){

          let nowT = Date.now()

          let arg = arguments

          if(nowT  - pre  > = delay ) {

            fn.apply(this ,arg)

            pre = Date.now()

          }

        }

        

      }

  • 相关阅读:
    数据库语句学习(union语句)
    终于开通博客了啦
    Winform用Post方式打开IE
    Winform webbrowser 隐藏 html 元素
    MVC 附件在线预览
    典型用户和场景
    我的第一篇博客01
    大数据算法摘录
    mac下查看端口占用情况
    tomcat的运行脚本
  • 原文地址:https://www.cnblogs.com/liuhp/p/12217129.html
Copyright © 2011-2022 走看看