分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 技术分享

js 函数节流

发布时间:2023-09-06 01:09责任编辑:熊小新关键词:js

  在JS中,函数的调用大多数都是由用户主动调用触发,但是在有的事件中,比如mousemove、window.onresize、touchmove中,函数的调用次数会非常频繁,从而消耗浏览器大量的内存空间,造成浏览器卡顿甚至假死的问题。所以函数节流的目的就是减少函数在这些事件中的调用次数,从不可控制到可控。

  函数节流的实现方式有很多中,通用的原理就是使用setTimeout函数,延迟执行事件处理函数,在没有执行这个函数前,再次调用它时都忽略,具体实现方式如下:

/* * 节流函数 * fn 事件中实际需要调用的函数 * interval ???函数最短隔多长时间调用 * */var throttle = function(fn , interval){ ???var _self = fn , ????timer , ???????//定时器 ???????isFirst = true; ???????//是否是第一次调用 ???return function(){ ???????var args = arguments , ???????????_this = this; ???????if(isFirst){ ???????????//如果是第一次执行,不需要走定时器 ???????????_self.apply(_this , args); ???????????return isFirst = false; ???????} ???????/*从第二次执行就要开始走定时器了*/ ???????if(timer) ???return; ???????????//如果定时器内的函数还未执行return ???????timer = setTimeout(function(){ ???????//定时函数 ???????????clearTimeout(timer); ???????????timer = null; ???????????_self.apply(_this , args); ???????} , interval || 100) ???}}//测试window.onresize = throttle(function(){ ???console.log(222);} , 500);

  然后可以对比下不使用throttle方法,会发现打印的频率明显的降低

搞定!!!

js 函数节流

原文地址:http://www.cnblogs.com/skyHF/p/7494936.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved