Question

我正在尝试制作滑块，我有获取对象数组并循环它的功能，我选择了更改模型列表，但是当我更改选择时，旧功能实例仍然有用，它们开始工作一起。所以我添加功能止动器，但它不会工作。求救，谢谢！

       var keepGoing = true;

       function slideList(models) {
                    $.each(models, function (index, model) {
                        setTimeout(function () {
                            if (keepGoing != false) {
                        moditem.innerHTML = "";
                        modlist.value = model.id;
                        var photo = document.createElement('IMG');
                        photo.src = model.photos[0].file;
                        photo.classList.add('img');
                        moditem.appendChild(photo);
                        if (index >= models.length - 1) {
                            slideList(models);
                        }
                    } else {
                        return false;
                    }
                    },
                    5000 * index);
            });
        }

        function startLoop() {
            keepGoing = true;
        }

        function stopLoop() {
            keepGoing = false;
        }

        $("#car-type-select").on('change', function () {
            stopLoop();
            getModels(this.value);
        });

清除超时：

    var timer;
    function slideList(models) {
            $.each(models, function (index, model) {
                timer = setTimeout(function () {
                        moditem.innerHTML = "";
                        modlist.value = model.id;
                        var photo = document.createElement('IMG');
                        photo.src = model.photos[0].file;
                        photo.classList.add('img');
                        moditem.appendChild(photo);
                        if (index >= models.length - 1) {
                            slideList(models);
                        }
                    },
                    5000 * index);
            });
        }

        $("#car-type-select").on('change', function () {
            clearTimeout(timer);
            getModels(this.value);
        });

其他不重要的功能

    function getModels(cartype_id) {
            $.ajax({
                type: 'POST',
                url: '/home/models/get',
                data: {
                    'cartype_id': cartype_id
                },
                success: function (models) {
                    makeList(models);
                    slideList(models)
                }
            });
        }

        function makeList(models) {
            modlist.innerHTML = "";
            $.each(models, function (index, model) {
                var option = document.createElement("option");
                option.text = model.manufacturer.name + ' ' + model.name;
                option.value = model.id;
                modlist.add(option);
            });
        }

Answer 1

您需要使用clearTimeout来停止setTimout中的功能以停止执行。

示例：

var timer = setTimeout(function(){ /* code here */ }, 3000)

clearTimeout(timer) //it will stop setTimeout function from executing.

查看代码更新后：

请你试试：

var timers = [];

function slideList(models) {
  $.each(models, function(index, model) {
    timers.push(setTimeout(function() {
        moditem.innerHTML = "";
        modlist.value = model.id;
        var photo = document.createElement('IMG');
        photo.src = model.photos[0].file;
        photo.classList.add('img');
        moditem.appendChild(photo);
        if (index >= models.length - 1) {
          slideList(models);
        }
      },
      5000 * index));
  });
}

$("#car-type-select").on('change', function() {
  $.each(timers, function(i, timer) {
    clearTimeout(timer);
  })
  getModels(this.value);
});

setTimeout在循环中被调用，需要setTimeout引用数组

如何从另一个函数停止函数，然后使用另一个参数再次启动它

1 个答案: