js 节流函数

函数节流背后的基本思想是,某些代码不可以在没有间断的情况连续重复执行。第一次调用函数,创建一个定时器,在指定的时间间隔之后运行代码。

当第二次调用该函数时,它会清除前一次的定时器并设置另一个。如果前一个定时器已经执行过了,这个操作就没有任何意义。然而,如果前一个定时

器尚未执行,其实就是将其替换为一个新的定时器。目的是只有在执行函数的请求停止了一段时间之后才执行。
     function throttle ( method , context ){
                clearTimeout ( method.tId );
                method.tId = setTimeout ( function () {
                     method.call ( context );
                 } , 100);
          }

function throttle(method,delay){

      var timer=null;

       return function(){

        var context=this, args=arguments;

         clearTimeout(timer);

        timer=setTimeout(function(){

           method.apply(context,args);

         },delay);}

}

时间: 2024-11-08 22:10:37

js 节流函数的相关文章

学习笔记 -- js节流函数

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

js节流函数中的参数传递

以下内容,都是本人自己思考所得,不免存在很多问题,欢迎大家指正或者提供更好的解决方法. 在开发中,遇到这样一个问题:拍摄地点列表,用户如果在短时间内多次点击同一个地点时,将会添加多个同名地点. 很显然,这不是我们想要的结果.然后就上网搜了一下,知道了一个新的概念,函数节流(在这里,这个理解是错误的,应该是函数去抖,这个后面再说).在这里主要参照了博客园谦行的这篇文章:Javascript函数节流 这边文章主要讲述了无参数函数的节流,并提供了两种实现方式.而我在这里想要说的是这实际开发中,我遇到的

js节流函数高级版

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

js 节流函数 throttle

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

js的函数节流(throttle)

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

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

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

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

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

js面试题之手写节流函数和防抖函数

函数节流:不断触发一个函数后,执行第一次,只有大于设定的执行周期后才会执行第二次 1 /* 2 节流函数:fn:要被节流的函数,delay:规定的时间 3 */ 4 function throttle(fn,delay){ 5 // 记录上一次函数出发的时间 6 var lastTime = 0 7 return function(){ 8 // 记录当前函数触发的时间 9 var nowTime = new Date().getTime() 10 // 当当前时间减去上一次执行时间大于这个指定

js、vue防抖函数、节流函数,工具类封装

防抖函数(可用于防止重复提交) 当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次, 如果设定时间到来之前,又触发了事件,就重新开始延时.也就是说当一个用户一直触发这个函数,且每次触发函数的间隔小于既定时间,那么防抖的情况下只会执行一次. /** * 防抖函数(可用于防止重复提交) * 当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次, * 如果设定时间到来之前,又触发了事件,就重新开始延时.也就是说当一个用户一直触发这个函数, * 且每次触发函数的间隔