简单的节流函数throttle

在实际项目中,总会遇到一些函数频繁调用的情况,比如window.resize,mouseover,上传进度类似的触发频率比较高的函数,造成很大的性能损耗,这里可以使用节流函数来进行性能优化,主要是限制函数被频繁调用的解决方案:

let throttle = function(fn,interval){
    let __self = fn,timer,firstTime = true;
    return function(){
        var args = arguments,__me = this;
        if(firstTime){
            __self.apply(__me,args);
            return firstTime = false;
        }
        if(timer){
            return false;
        }
        //先执行了一次,firstTime是false,然后500毫秒之后利用定时器再次执行。
        timer = setTimeout(function(){
            clearTimeout(timer);
            timer = null;
            __self.apply(__me,args);
        },interval||500)
    }
}

window.onresize = throttle(function(){
    console.log(1)
},500)

此函数可以触类旁通,throttle是个高阶函数,参数输入是个函数【该频繁调用的函数】以及触发时间,第一次触发有个只执行一次的方法,后面接着就是定时器触发函数。节流函数的本质就是利用定时器的延迟进行函数触发。

【完】

后来我才知道,他并不是我的花。只是我恰好途径了他的盛放。

原文地址:https://www.cnblogs.com/tangjiao/p/9915537.html

时间: 2024-11-22 23:22:34

简单的节流函数throttle的相关文章

js 节流函数 throttle

/* * 频率控制 返回函数连续调用时,fn 执行频率限定为每多少时间执行一次 * @param fn {function} 需要调用的函数 * @param delay {number} 延迟时间,单位毫秒 * @param immediate {bool} 给 immediate参数传递false 绑定的函数先执行,而不是delay后后执行. * @param debounce {bool} 给 immediate参数传递false 绑定的函数先执行,而不是delay后后执行.debounc

vue实现输入框的模糊查询(节流函数的应用场景)

上一篇讲到了javascript的节流函数和防抖函数,那么我们在实际场合中该如何运用呢? 首先,我们来理解一下:节流函数首先是节流,就是节约流量.内存的损耗,旨在提升性能,在高频率频发的事件中才会用到,比如:onresize,onmousemove,onscroll,oninput等事件中会用到节流函数: 输入框的模糊查询功能原理分析 所谓模糊查询就是不需要用户完整的输入或者说全部输入信息即可提供查询服务,也就是用户可以在边输入的同时边看到提示的信息(其实是查询出来匹配到的信息),百度的搜索功能

js的函数节流(throttle)

什么是函数节流? 介绍前,先说下背景.在前端开发中,有时会为页面绑定resize事件,或者为一个页面元素绑定拖拽事件(其核心就是绑定mousemove),这种事件有一个特点,就是用户不必特地捣乱,他在一个正常的操作中,都有可能在一个短的时间内触发非常多次事件绑定程序.而大家知道,DOM操作时很消耗性能的,这个时候,如果你为这些事件绑定一些操作DOM节点的操作的话,那就会引发大量的计算,在用户看来,页面可能就一时间没有响应,这个页面一下子变卡了变慢了.甚至在IE下,如果你绑定的resize事件进行

js 函数节流 jQuery throttle/debounce

在<JavaScript高级程序设计>一书有介绍函数节流,里面封装了这样一个函数节流函数: function throttle(method, context) { clearTimeout(methor.tId); method.tId = setTimeout(function(){ method.call(context); }, 100); } 它把定时器ID存为函数的一个属性.而调用的时候就直接写 window.onresize = function(){ throttle(myFu

JS魔法堂:函数节流(throttle)与函数去抖(debounce)

一.前言 以下场景往往由于事件频繁被触发,因而频繁执行DOM操作.资源加载等重行为,导致UI停顿甚至浏览器崩溃. 1. window对象的resize.scroll事件 2. 拖拽时的mousemove事件 3. 射击游戏中的mousedown.keydown事件 4. 文字输入.自动完成的keyup事件 实际上对于window的resize事件,实际需求大多为停止改变大小n毫秒后执行后续处理:而其他事件大多的需求是以一定的频率执行后续处理.针对这两种需求就出现了debounce和throttl

[概念] js的函数节流和throttle和debounce详解

js的函数节流和throttle和debounce详解:同样是实现了一个功能,可能有的效率高,有的效率低,这种现象在高耗能的执行过程中区分就比较明显.本章节一个比较常用的提高性能的方式,通常叫做"函数节流",下面就通过代码实例对此做一下介绍.一.函数节流是什么:在实际编码中,mousemove和resize是使用非常频繁的事件类型(当然还有其他类似事件类型),这样的事件有一个共同的特点,就是在一个普通的操作中,就有可能会在极短的时间内多次执行事件处理函数,会极大的损耗性能,比如resi

js节流函数高级版

节流函数其主要作用就是防止用户在短时间内多次触发该事件. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> 思路: 鼠标抬起,间隔0.5秒请求小区数据,通过上下箭头选择小区,输入框文字变化,按下enter或者搜索按钮时,

Javascript性能优化之节流函数

在我们的工作中往往有这样的需求,下拉上拉加载实现无限加载列表数据这样的一个功能,这个时候小伙伴们可能就觉得这个功能几分钟的事,于是乎,下边这段代码浩浩荡荡就出来了 window.addEventListener('scroll',function(){ // 判断滚动条有没有到底部 },false) 看似上面这段代码没有什么问题,然后我们给这段代码再加一段代码看一下 window.addEventListener('scroll',function(){ // 判断滚动条有没有到底部 conso

underscore.js中的节流函数debounce及trottle

函数节流   throttle and debounce的相关总结及想法 一开始函数节流的使用场景是:放止一个按钮多次点击多次触发一个功能函数,所以做了一个clearTimeout setTimeout函数 clearTimeout(cancelTimer); cancelTimer =setTimeout(function(){ switchControl.switchAciontFactory(view, conf); },300) 代码的意思就不做多说了,实际上我无意间实现了一个debou