jquery项目实战【爱创课堂专业前端培训】

jquery项目实战——爱创课堂专业前端培训

 

一、函数节流

函数节流： 可以使一些频繁触发的函数事件受到限制，可以使函数在一定的时间之内或者满足某些条件之后再去执行。

 

设一个变量lock 取值是布尔值

var lock = true 函数可以执行

lock = false， 函数不可以执行

 

举例：

1 // 定义锁 var lock = true; 2 function a() { 3    if (!lock) { 4     return; 5 } 6 lock = false; 7 }     8

 

1.1 延时器

可以比喻成定时炸弹，在一定的时间只会执行一次

使用方式：

setTimeout(fn, time)

fn: 要执行的函数

time: 要延迟的时间

举例：

1 var lock = true; 2 function b() { 3   if (!lock) { 4     return; 5  } 6   lock = false; 7 // 在3s之后打开锁，使用延时器 setTimeout(function() { 8     // 打开锁     lock = true; 9     10 }, 3000) 11 }

 

二、this

this表示触发事件的对象。

each()方法的参数是一个函数， 函数中的this表示遍历到的该对象。

函数中也有this, 如果当函数自执行，this指向window.

 

举例：

1 // 定义一个函数 2 function fn() { 3    console.log(this) // window; 4 } 5 // 函数执行 6 fn();

 

 改变函数的this指向可以使用call()方法

使用方式：

fn.call() 接受的参数就是要改变的this指向。

 

举例：

1 // 定义函数 2 function fun() { 3  console.log(this); 4 } 5  6 // 使用call方法改变函数中的this指向 7 fun.call($("#btn")); 8 fun.call(document); 9 fun.call(document.body);

 

输出结果：

1

 

三、each

each()方法：

第一种使用方式：

对象.each(funciton() {})  接受一个参数就是匿名函数

1 // 使用each进行遍历 2 $("li").each(function(i) { 3  console.log(i); 4 })

 

第二种使用方式：

一般用于遍历数组或者遍历对象的时候

$.each(target, fn)

target: 要遍历的目标

fn: 执行的函数

函数中有两个参数

第一个参数 索引值

第二个参数 成员值

举例：

1 // 定义一个数组 2 var arr = ["a", "b", "c", "d"]; 3 // 使用each方法的第二种方式 4 $.each(arr, function(index, value) { 5  // console.log(index, value); 6 })

 

结果：

1

 

遍历对象：

1 // 定义一个对象 2 var obj = { 3  a: "1", 4  b: "2", 5  c: "3" 6 }

 

结果：

1