如何从另一个功能停止功能，然后使用另一个参数重新启动

Question

i am trying to make a slider, i have function that getting array of objects and loop it, and i have select that change models list, but when i change select, old instance of function still work, they are starting to work together. So i add function stopper, but it wont work. Help please, thank you!

       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);
        });

Clear timeout:

    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);
        });

Other unimportant functions

    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

You need to use clearTimeout to stop function in setTimout to stop executing.

Example:

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

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

After looking at code update:

Can you please try:

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 is getting called in loop to need array of setTimeout references