gpt4 book ai didi

javascript - jQuery 中带有回调函数的 for 循环或如何避免它们

转载 作者:行者123 更新时间:2023-12-02 17:15:40 25 4
gpt4 key购买 nike

我在 jQuery 中有一个小动画,需要在单击时快速显示单词和非单词一段确定的时间(以毫秒为单位)。

var arr = ['GOAT', 'BEAVER', 'TIGER', 'ELEPHANT', 'FOX', 'BEAR', 'BEE', 'CAT', 'DOG', 'MOUSE', 'LION', 'FISH', 'SHRIMP', 'HEN', 'GOOSE', 'COW', 'CROCODILE', 'DEER', 'MOOSE', 'HIPPOPOTAMUS', 'WOLF', 'RACCOON', 'HARE', 'OTTER', 'DOLPHIN', 'WHALE', 'CHICK'];

var narr = ['REQXARDE', 'YORSTDAJ', 'AWQPQQQR', 'FJSJAJAA', 'QQWPEEET', 'ALALOIYE', 'BOUILAARW', 'NVOSAQEWW', 'WARTYDIOS', 'SUPARWLISS', 'WQQQAPXXX', 'OOOSAAOEA', 'SSIUDHFWW', 'AWWWEIPP', 'AAZXDOUP', 'SURPAAARJ', 'AALDJWWA', 'WEEJSYSJ', 'REQXARDE', 'YORSTDAJ', 'AWQPQQQR', 'FJSJAJAA', 'QQWPEEET', 'ALALOIYE', 'BOUILAARW'];

var key = ['jQuery', 'Javascript', 'css3', 'stackoverflow', 'html5', 'animation'];

/* This selects a random value from each array */
function narr_val() { return narr[Math.floor(Math.random() * narr.length)]; }
function arr_val() { return arr[Math.floor(Math.random() * arr.length)]; }
function key_val() { return key[Math.floor(Math.random() * key.length)]; }

$( "#foo" ).bind("click tap", function(){

$("#foo").unbind( "click" );

//Block 0
$('#foo').fadeIn(1).delay(500).html('Attention!').fadeOut(1,function(){
$('#foo').fadeIn(1).delay(500).html('In 3...').fadeOut(1,function(){
$('#foo').fadeIn(1).delay(500).html('2...').fadeOut(1,function(){
$('#foo').fadeIn(1).delay(500).html('1...').fadeOut(1,function(){
$('#foo').fadeIn(1).delay(500).html('Go!').fadeOut(1,function(){

//Block 1
$('#foo').fadeIn(1).delay(175).html(narr_val()).fadeOut(1,function(){
$('#foo').fadeIn(1).delay(40).html(key_val()).fadeOut(1,function(){
$('#foo').fadeIn(1).delay(175).html(narr_val()).fadeOut(1,function(){
$('#foo').fadeIn(1).delay(320).html(arr_val()).fadeOut(1,function(){
$('#foo').fadeIn(1).delay(40).html(narr_val()).fadeOut(1,function(){

//Block 2
$('#foo').fadeIn(1).delay(175).html(narr_val()).fadeOut(1,function(){
$('#foo').fadeIn(1).delay(40).html(key_val()).fadeOut(1,function(){
$('#foo').fadeIn(1).delay(175).html(narr_val()).fadeOut(1,function(){
$('#foo').fadeIn(1).delay(320).html(arr_val()).fadeOut(1,function(){
$('#foo').fadeIn(1).delay(40).html(narr_val()).fadeOut(1,function(){

等等...有一个版本有 27 个 block ,另一个版本有 40 个。Working example here

}); }); }); }); }); }); }); }); }); }); }); }); }); }); }); });

我的问题:1)除了使用嵌入式回调函数之外,还有其他方法可以做到这一点吗?2) 有什么方法可以使用 for 循环或其他方式编写该语法,从而避免编写 27 个回调函数 block ?

最佳答案

另一种方法是通过创建可排队的 .html 调用来使用内置排队功能(有关详细信息,请参阅 jQuery .queue):

function queuedHtml(html) {
return function () {
$(this).html(html);
$(this).dequeue();
};
}

可以调整它以使用命名队列而不是默认队列。

完成此操作后,您可以将代码调整为如下所示:

$("#foo").bind("click tap", function () {
var $foo = $("#foo");
$foo.unbind("click");

$foo.fadeIn(1).delay(500).queue(queuedHtml('Attention!')).fadeOut(1)
.fadeIn(1).delay(500).queue(queuedHtml('In 3...')).fadeOut(1)
.fadeIn(1).delay(500).queue(queuedHtml('2...')).fadeOut(1)
.fadeIn(1).delay(500).queue(queuedHtml('1...')).fadeOut(1)
.fadeIn(1).delay(500).queue(queuedHtml('Go!')).fadeOut(1);

for (var i = 0; i < 27; ++i) {
$foo.fadeIn(1).delay(175).queue(queuedHtml(narr_val())).fadeOut(1)
.fadeIn(1).delay(40).queue(queuedHtml(key_val())).fadeOut(1)
.fadeIn(1).delay(175).queue(queuedHtml(narr_val())).fadeOut(1)
.fadeIn(1).delay(320).queue(queuedHtml(arr_val())).fadeOut(1)
.fadeIn(1).delay(40).queue(queuedHtml(narr_val())).fadeOut(1);
}

$foo.fadeIn(1).queue(queuedHtml('Terminated'));
});

demo fiddle

您可以通过重构一些重复的逻辑来进一步减少代码 - 例如:

function addToQueue($el, html, delay) {
$el.fadeIn(1).delay(delay).queue(queuedHtml(html)).fadeOut(1);
}

$("#foo").bind("click tap", function () {
var $foo = $("#foo");
$foo.unbind("click");

addToQueue($foo, 'Attention!', 500);
addToQueue($foo, 'In 3...', 500);
addToQueue($foo, '2...', 500);
addToQueue($foo, '1...', 500);
addToQueue($foo, 'Go!', 500);

for (var i = 0; i < 27; ++i) {
addToQueue($foo, narr_val(), 175);
addToQueue($foo, key_val(), 40);
addToQueue($foo, narr_val(), 175);
addToQueue($foo, arr_val(), 320);
addToQueue($foo, narr_val(), 40);
}

$foo.fadeIn(1).queue(queuedHtml('Terminated'));
});

demo fiddle

或者通过更多的重构来进一步减少它:

$("#foo").bind("click tap", function () {
var $foo = $("#foo");
$foo.unbind("click");

$.each(['Attention', 'In 3...', '2...', '1...', 'Go!'], function(idx, val) {
addToQueue($foo, val, 500);
});

var delays = [175, 40, 175, 320, 40];
for (var i = 0; i < 27; ++i) {
$.each([narr_val(), key_val(), narr_val(), arr_val(), narr_val()], function(idx, val) {
addToQueue($foo, val, delays[idx]);
});
}

$foo.fadeIn(1).queue(queuedHtml('Terminated'));
});

demo fiddle

关于javascript - jQuery 中带有回调函数的 for 循环或如何避免它们,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24457668/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com