zoukankan      html  css  js  c++  java
  • JavaScript 函数节流

     DOM 操作的交互需要更多的内存和 CPU 时间,连续进行过多的 DOM 相关的操作可能会导致浏览器变慢甚至崩溃,函数节流的设计思想是让某些代码可以在间断的情况下连续重复执行,实现该方法可以使用定时器对该函数进行节流操作;

    比如:第一次调用函数的时候,创建一个定时器,在指定的时间间隔下执行代码。当第二次执行的时候,清除前一次的定时器并设置另一个,将其替换成一个新的定时器;

    复制代码
    // 如下简单函数节流代码演示
    var throttle = {
        timeoutId: null,
        // 需要执行的方法
        preformMethod: function(){
        
        },
        // 初始化需要调用的方法
        process: function(){
            clearTimeout(this.timeoutId);
            var self = this;
            self.timeoutId = setTimeout(function(){
                self.preformMethod();
            },100);
        }
    };
    // 执行操作
    throttle.process();
    复制代码

    函数节流解决的问题是一些代码 (比如事件) 无间断的执行,这可能会影响浏览器的性能,浏览器变慢或者直接崩溃。比如对于 mouseover 事件或者 click 事件,比如点击 tab 项菜单,无限的点击,有可能会导致浏览器会变慢操作,这时候我们可以使用函数节流的操作来解决;

    参考:理解函数节流

  • 相关阅读:
    JavaScript 正则表达式
    git常用命令
    用纯css使内容永远居在页面底部
    Oracle中随机抽取N条记录
    表数据回复到某个时候
    oracle同名存储过程被覆盖后如何恢复(转)
    mybatis+spring+mysql
    定位
    关于js的闭包和复制对象
    idea展示runDashboard的窗口
  • 原文地址:https://www.cnblogs.com/xiaochechang/p/5992203.html
Copyright © 2011-2022 走看看