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 图片1.png

三、each
each()方法：

第一种使用方式：

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

1 // 使用each进行遍历

2 $(“li”).each(function(i) {

3 console.log(i);

4 })

图片2.png

第二种使用方式：

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

$.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 图片3.png

遍历对象：

1 // 定义一个对象

2 var obj = {

3 a: “1”,

4 b: “2”,

5 c: “3”

6 }

结果：

1 图片4.png