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 }    

 

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 }

6 // 使用call方法改变函数中的this指向

7 fun.call($("#btn"));

8 fun.call(document);

9 fun.call(document.body);

 

输出结果:

图片1.png

 

三、each

each()方法:

第一种使用方式:

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

1 // 使用each进行遍历

2 $("li").each(function(i) {

3  console.log(i);

4 })

jquery项目实战【爱创课堂专业前端培训】_第1张图片

 

第二种使用方式:

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

$.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 })

 

结果:

图片3.png

 

遍历对象:

1 // 定义一个对象

2 var obj = {

3  a: "1",

4  b: "2",

5  c: "3"

6 }

 

结果:

图片4.png

你可能感兴趣的:(jquery项目实战【爱创课堂专业前端培训】)