Question

我试图让这个函数每秒执行但它不起作用。我只能通过触发悬停事件或类似事件（即点击）来获得我想要的东西。但我希望它能够独立行动！这样每秒或者wutever都会运行change（）函数。我尝试过setInterval和setTimeout但无济于事。只有刷新页面才会执行该功能。也许我做错了但我不知道......感谢任何帮助，谢谢！

这是我想要的但它使用悬停...用户需要触发事件，这不是我想要的..需要每隔x秒自动发生一次！

http://jsfiddle.net/nycionx/LzbCP/

$(document).ready(function()
{
    var color = ['red', 'blue', 'green','orange', 'brown', 'pink', 'black', 'grey'];

    function change() 
    {
        var ranColor = Math.floor(color.length * Math.random());
        $(this).css('background-color', color[ranColor]);
    }

    $('#_1x1_1_1').hover(change);
    $('#_1x1_1_2').hover(change);
    $('#_1x1_1_3').hover(change);
    $('#_1x1_1_4').hover(change);

    $('#_1x1_2_1').hover(change);
    $('#_1x1_2_2').hover(change);
    $('#_1x1_2_3').hover(change);
    $('#_1x1_2_4').hover(change);

    $('#_1x1_3_1').hover(change);
    $('#_1x1_3_2').hover(change);
    $('#_1x1_3_3').hover(change);
    $('#_1x1_3_4').hover(change);

    $('#_1x1_4_1').hover(change);
    $('#_1x1_4_2').hover(change);
    $('#_1x1_4_3').hover(change);
    $('#_1x1_4_4').hover(change);

});

这是我尝试使用setInterval但由于某种原因它不起作用。只有当页面加载时才会执行一次。我甚至尝试了一个for循环但没有...

http://jsfiddle.net/nycionx/9xS4j/4/

$(document).ready(function()
{
    var color = ['red', 'blue', 'green','orange', 'brown', 'pink', 'black', 'grey'];

    function change(yo) 
    {
        var ranColor = Math.floor(color.length * Math.random());
        $(yo).css('background-color', color[ranColor]);
    }

    setInterval(change('#_1x1_1_1'), 1000);
    setInterval(change('#_1x1_1_2'), 1000);
    setInterval(change('#_1x1_1_3'), 1000);
    // etc etc... they wont execute every second, instead only ONCE when the page loads...??

    });

PS。最终我想在$（this）关注的功能中添加更多内容。 $（this）.css（'color'，color [ranColor]）;等等

Answer 1

通过在()的参数中使用括号setInteval，您将立即执行change函数，而不是在计时器滴答时执行。相反，你可以这样做：

setInterval(function(){
    change('#_1x1_1_1');
}), 1000);

或者您可以使用.bind()绑定参数而无需匿名函数：

setInterval(change.bind(this, '#_1x1_1_1'), 1000);
setInterval(change.bind(this, '#_1x1_1_2'), 1000);
setInterval(change.bind(this, '#_1x1_1_3'), 1000);

Answer 2

问题

问题在于你调用setInterval的方式，你需要传递一个函数，你当前正在传递一个函数的结果，它不会做任何有用的事情。

解决方案

传递函数的正确方法（而不是函数的结果）如下：

setInterval(change, 1000);

但是，这并不允许指定您的参数。为此，您可以使用匿名函数并从中调用您的函数（带参数）：

setInterval(function() { change('#_1x1_1_1'); }, 1000);

Here is a working example

更好的解决方案

由于你有很多正方形，我建议你使用类选择器并循环它们。例如：

function change(element) {
    var ranColor = Math.floor(color.length * Math.random());
    element.css('background-color', color[ranColor]);
}

$.each($('.squares'), function (index, element) {
    setInterval(function () {
        change($(element));
    }, 1000);
});

Here is a working example

Answer 3

检查链接以一起或随机更改颜色。希望它有所帮助

$(document).ready(function(){

    var color = ['red', 'blue', 'green','orange', 'brown', 'pink', 'black', 'grey'];
    var obj = ['#_1x1_1_1', '#_1x1_1_2', '#_1x1_1_3', '#_1x1_1_4'];
    var obj2 = ['#_1x1_4_1', '#_1x1_4_2', '#_1x1_4_3', '#_1x1_4_4'];

    function change_rand(){ //chage to same color
        setInterval(function(){
            var ranColor = Math.floor(color.length * Math.random());
            for(i in obj){
                $(obj[i]).css('background-color', color[ranColor]);
            }
        }, 1000);
    }
    change_rand();

    function change_rand2(){ //change into random colors
        setInterval(function(){

            for(i in obj){
                var ranColor = Math.floor(color.length * Math.random());
                $(obj2[i]).css('background-color', color[ranColor]);
            }
        }, 1000);
    }
    change_rand2();

});

http://jsfiddle.net/9xS4j/11/

无法获取jquery代码每秒执行..？

3 个答案: