博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js性能优化之---防抖函数
阅读量:6029 次
发布时间:2019-06-20

本文共 897 字,大约阅读时间需要 2 分钟。

使用场景

  • input的时时触发搜索功能
  • scroll事件的滚动条位置的监测
  • resize事件监听窗口变化等

举个栗子(input框时时触发搜索功能)

普通未防抖款

var textElement = document.getElementById('test');var timer;textElement.oninput = function(){    console.log('造吧,木有防抖效果');}

1141519-20190315142215789-1120395127.png

普通防抖款

var textElement = document.getElementById('test');var timer;textElement.oninput = function(){    console.log('oninput事件');    if(timer){        clearTimeout(timer);    }    timer = setTimeout(function(){        timer = null;        console.log('添加防抖效果之后的操作')    },2000)}

1141519-20190315142230699-2096637060.png

封装防抖款

function antishake(fn,delay){    return function(){        if(timer){            clearTimeout(timer);        }        timer = setTimeout(function () {            timer = null;            fn();        },delay);    }}function business(){    console.log('添加防抖效果之后的操作')}textElement.oninput = function(){    console.log('oninput事件')    antishake(business,800)();}

1141519-20190315142247224-1134178346.png

转载于:https://www.cnblogs.com/Ivy-s/p/10536821.html

你可能感兴趣的文章
Windows安装Composer出现【Composer Security Warning】警告
查看>>
四 指针与数组 五 函数
查看>>
硬盘空间满了
查看>>
dutacm.club Water Problem(矩阵快速幂)
查看>>
深入JVM内核--GC算法和种类
查看>>
iOS的AssetsLibrary框架访问所有相片
查看>>
MySQLdb的安装
查看>>
读书笔记三
查看>>
数论 - 最小乘法逆元
查看>>
企业架构研究总结(22)——TOGAF架构开发方法(ADM)之信息系统架构阶段
查看>>
接口测试(三)--HTTP协议简介
查看>>
周志华《机器学习》课后答案——第4章.决策树
查看>>
frameset分帧问题
查看>>
特殊样式:ime-mode禁汉字,tabindex焦点
查看>>
linux
查看>>
Layout父元素点击不到的解决办法
查看>>
【面试次体验】堆糖前端开发实习生
查看>>
基于apache实现负载均衡调度请求至后端tomcat服务器集群的实现
查看>>
C#+QQEmail自动发送邮件
查看>>
[Hadoop]MapReduce多输出
查看>>