js节流函数中的参数传递

以下内容,都是本人自己思考所得,不免存在很多问题,欢迎大家指正或者提供更好的解决方法。

在开发中,遇到这样一个问题:拍摄地点列表,用户如果在短时间内多次点击同一个地点时,将会添加多个同名地点。

很显然,这不是我们想要的结果。然后就上网搜了一下,知道了一个新的概念,函数节流(在这里,这个理解是错误的,应该是函数去抖,这个后面再说)。
在这里主要参照了博客园谦行的这篇文章:Javascript函数节流

这边文章主要讲述了无参数函数的节流,并提供了两种实现方式。而我在这里想要说的是这实际开发中,我遇到的含参数节流问题以及这一过程中产生的其他问题。

首先,先说明含参函数的传递方式:1.构造匿名函数 2.参数和方法分开传递 (js 把函数作为参数传递给另一个方法

在这里,我也按照谦行的两种实现方式来分别说明:

第一种方式:

function throttle(method, context) {
    clearTimeout(method.tId);
    method.tId = setTimeout(function() {
      method.apply(context);
    }, 500);
 }

这里很容易看出,构造匿名函数的方法是不可取的,因为每回调用匿名函数,tid的值都是undefined,不能达到节流的目的。

onclick="throttle(function() {resizehandler(‘a‘,‘b‘);},window)"

如果直接将值与参数分开传递,需要重写throttle的方法定义,而且这样操作达不到节流函数复用的目的。我自己思考的处理方式如下(这里直接使用了arguments,目的是达到了,不知道会不会有其他影响):

<div class="container" id="div1" onclick="test(‘a‘,‘b‘)"></div>
  <script>
  function test() {
      throttle(resizehandler,window,arguments)
  }
  function throttle(method, context,parameters) {
    clearTimeout(method.tId);
    method.tId = setTimeout(function() {
      method.apply(context,parameters);
    }, 500);
  }
  var n = 0;
  function resizehandler(name, title) {
    console.log(++n);
    console.log(name);
    console.log(title);
  }

第二种实现方式:

function throttle(method, delay) {
    var timer = null;
    return function() {
      var context = this,
        args = arguments;
      clearTimeout(timer);
      timer = setTimeout(function() {
        method.apply(context, args);
      }, delay);
    }
  }

因为该方法使用了函数句柄,可以通过构造匿名函数的方式来传递参数,不过也正是由于这一原因的影响,导致在事件绑定上有一定区别。

document.getElementById(‘div‘).onclick = throttle(function() {
    resizehandler(‘a‘,‘b‘);
  }, 500);

上面代码所示的绑定方法是可行的,但直接onclick = "throttle(function() {resizehandler(‘a‘,‘b‘);}, 500)";是不可行的,返回的函数没有被调用,如果改成onclick = "throttle(function() {resizehandler(‘a‘,‘b‘);}, 500)()",函数被调用了,但是没达到节流的目的。具体原因,我也不是太懂,希望有人能够指教。

当然将函数和参数分开传递,也是能够实现的,与前一种方式没有太大区别,大家可以根据实际情况来使用。

最后,在实现的过程中,又发现了一个新的名词叫函数去抖,根据定义来说,前面我们所提到的内容应该都是函数去抖,不过细致的也没见多大区分,大家有兴趣的可以去看这篇文章:JS魔法堂:函数节流(throttle)与函数去抖(debounce)

时间: 2024-10-10 06:35:36

js节流函数中的参数传递的相关文章

学习笔记 -- js节流函数

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

理解 JS 回调函数中的 this

理解 JS 回调函数中的 this:https://www.cnblogs.com/gavinyyb/p/6286750.html 原文链接:http://www.tuicool.com/articles/z2Yvaq 任何变量或对象都有其赖以生存的上下文.如果简单地将对象理解为一段代码,那么对象处在不同的上下文,这段代码也会执行出不同的结果. 例如,我们定义一个函数 getUrl 和一个对象 pseudoWindow . function getUrl() { console.log(this

在js自定义函数中使用$(event.target)代替$(this)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <ti

JS.【转】JS事件处理函数中return的作用

1.js事件处理函数中return的作用 - AnswerCard - 博客园.html(https://www.cnblogs.com/answercard/p/5255230.html) 2.网页内容保存: 这里面的return含有一些细节知识: 例如:onClick='return add_onclick()'与 onClick='add_onclick()'的区别 JAVASCRIPT在事件中调用函数时用return返回值实际上是对window.event.returnvalue进行设置

js节流函数高级版

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

js事件处理函数中return的作用

原文:http://blog.csdn.net/gchonghavefun/article/details/8112830 这里面的return含有一些细节知识: 例如:onClick='return add_onclick()'与 onClick='add_onclick()'的区别 JavaScript在事件中调用函数时用return返回值实际上是对window.event.returnvalue进行设置. 而该值决定了当前操作是否继续.当返回的是true时,将继续操作.当返回是false时

js在函数中未定义的变量的处理

<html> <head> <script type="text/javascript"> var z=1; function abc(){ x =123; var y=12; } abc(); alert(x); alert(y); </script> </head> <body> </body> </html> 可以正常打印出x的值:x为全局变量: <html> <he

JS高级---函数中的this的指向,函数的不同调用方式

函数中的this的指向 普通函数中的this是谁?-----window 对象.方法中的this是谁?----当前的实例对象 定时器方法中的this是谁?----window 构造函数中的this是谁?-----实例对象 原型对象方法中的this是谁?---实例对象 //严格模式: "use strict";//严格模式 function f1() { console.log(this);//window } f1() 函数的不同调用方式 //普通函数 function f1() {

JS函数中的参数传递

数据类型    在 javascript 中数据类型可以分为两类: 基本类型值 primitive type,比如Undefined,Null,Boolean,Number,String. 引用类型值,也就是对象类型 Object type,比如Object,Array,Function,Date等. 变量的复制 众所周知,js中变量的基本类型和引用类型保存方式是不同的,这也就导致变量复制时也就不同了.如果从一个变量向另一个变量复制基本类型的值时,会将前者的值克隆一个,然后将克隆的值赋值到后者,