技术文章 | Technical articles

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

一、函数节流

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

 

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

var lock = true 函数可以执行

lock = false, 函数不可以执行

 

举例:

// 定义锁
var lock = true;

function a() {

   if (!lock) {

    return;

}

lock = false;

}    

 

1.1 延时器

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

使用方式:

setTimeout(fn, time)

fn: 要执行的函数

time: 要延迟的时间

举例:

var lock = true;

function b() {

  if (!lock) {

    return;

 }

  lock = false;

// 3s之后打开锁,使用延时器
setTimeout(function() {

    // 打开锁
    lock = true;

   

10 }, 3000)

11 }

 

二、this

this表示触发事件的对象。

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

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

 

举例:

// 定义一个函数

function fn() {

   console.log(this) // window;

}

// 函数执行

fn();

 

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

使用方式:

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

 

举例:

// 定义函数

function fun() {

console.log(this);

}

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

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

fun.call(document);

fun.call(document.body);

 

输出结果:

图片1.png

 

三、each

each()方法:

第一种使用方式:

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

// 使用each进行遍历

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

console.log(i);

})

图片2.png

 

第二种使用方式:

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

$.each(target, fn)

target: 要遍历的目标

fn: 执行的函数

函数中有两个参数

第一个参数 索引值

第二个参数 成员值

举例:

// 定义一个数组

var arr = ["a", "b", "c", "d"];

// 使用each方法的第二种方式

$.each(arr, function(index, value) {

// console.log(index, value);

})

 

结果:

图片3.png

 

遍历对象:

// 定义一个对象

var obj = {

a: "1",

b: "2",

c: "3"

}

 

结果:

图片4.png

关注微信公众号“icketang”,获取最新前端资讯,学习资料  

微信个人号二维码.jpg
项目实战视频教程、web前端视频教程
,请添加微信“haomei0452”免费领取 


B站搜索“爱创课堂网络科技” 免费观看前端视频以及项目实战


QQ图片20190401143635.jpg


上一篇文章: JavaScript/js交互 贪吃蛇项目实战
下一篇文章: 为什么要选择爱创课堂学前端?
更多详细内容请访问爱创官网首页:http://www.icketang.com/

最新发布 | 这里有最新的文章查看更多>>

爱创推荐 | 这里有推荐的文章查看更多>>